正交数据
此博客文章是在 DataTables 1.10 发布之前编写的,因此在某些方面已过时。例如,1.10 可以同时使用
columns.render
和columns.data
。此帖子保留供参考,但请参阅 手册的正交数据部分 以获取有关如何将 DataTables 与正交数据一起使用的说明。
数据很复杂。不仅表格中显示的数据将具有与表格中的其他数据点对应的规则,而且每个数据点本身也可以采用多种形式。例如考虑货币数据;为了显示,它可能以货币符号和千位分隔符的格式显示,而排序应以数字方式进行,并且对数据的搜索将接受任一形式。在本文中,我们将探讨 DataTables 如何使用单个数据点的不同形式以直观的方式向表格用户呈现复杂的数据集。
DataTables 有四个内置数据操作,每个操作都可能使用一个独立的数据源。这四个操作是
- 显示
- 排序
- 类型检测
- 过滤
默认情况下,DataTables 将对所有四个操作使用相同的数据,但使用 DataTables 1.9,可以轻松地修改这一点。
mData作为函数
DataTables 1.8 引入了一个名为 mData 的新属性,该属性允许 DataTables 将几乎任何 JSON 对象用作表格的数据源(在博客文章 使用 DataTables 的扩展数据源选项 中进行了详细讨论),并且 DataTables 1.9 基于此属性来允许正交数据用于 DataTables 使用的不同数据类型。
在 DataTables 1.9 中,mData 可以作为函数给定,DataTables 会告诉您它要请求数据的操作是什么。这允许您根据需要处理数据并返回请求的数据类型的数据。此外,为了在使用mData作为函数时使 DataTables 初始化尽可能干净,还可以使用此函数设置数据。因此,mData 的函数传递了三个参数
- {array|object} 该行的第一个数据
- {string} 请求的类型呼叫数据 - 在设置数据或“筛选器”、“显示”、“类型”、“排序”或收集数据时未定义时将为“设置”。请注意,当未定义给定数据类型时,DataTables 希望将对象的原始数据取回
- {*} 当第二个参数为“设置”时要设置的数据。
当调用的类型为“set”时,不需要函数的返回值,但在其他情况下,返回值将用于请求的数据。
货币示例
让我们为货币示例构建一个示例 mData 函数。注意,为了提高效率,由于“设置”操作只发生一次(除非将来更新数据),我们在“设置”操作中存储了三种不同的数据形式,可以非常快速地查找每种数据类型(用交易内存来提高速度)。我们可以像这样构建函数
function ( data, type, val ) {
if (type === 'set') {
// Store the base value
data.price = val;
// Display is formatted with a dollar sign and number formatting
data.price_display = val==="" ? "" : "$"+numberFormat(val);
// Filtering can occur on the formatted number, or the value alone
data.price_filter = val==="" ? "" : data.price_display+" "+val;
return;
}
else if (type === 'display') {
return data.price_display;
}
else if (type === 'filter') {
return data.price_filter;
}
// 'sort', 'type' and undefined all just use the integer
return data.price;
}
可以看出如何在函数中将任何格式应用于我们的数据,以及如何访问和使用源数据中的任何数据属性(可以执行数学计算,或者对于 Ajax 来源的数据,可以预先在服务器上对数据进行格式化)。在上面的函数中,我们使用一个格式化函数(numberFormat)为每个数字添加千位分隔符,以提高可读性。
构建它
毫无疑问,您可以看到货币示例仅展示了使用 mData 作为函数时所实现的可能性的皮毛。其他用例包括电话号码、日期以及任何其他数据的格式化,这些数据显示的方式可能与其排序或过滤的方式不同。
下面的示例显示了一个四列表格,其中包括
- 姓名 - 无额外处理
- 电话 - 电话号码,已经过格式化以供显示和过滤
- 薪水 - 使用上面显示的函数的货币列
- 入职日期 - 允许通过不同日期格式进行复杂过滤的日期列。例如,尽管日期显示为 YYYY/MM/DD,但请尝试按“12 月”对该表格进行过滤 - 过滤值会根据数据源动态计算。
与 fnRender 的关系
如果您之前使用过 DataTables,您可能会注意到这里讨论的 mData 与fnRender之间有相当大程度的重叠。fnRender 从 v1.0 起就已存在于 DataTables 中,并且仅提供较新的 mData 功能的“显示”方面。因此,fnRender 现在被认为已经过时,并被作为函数的 mData 所取代。fnRender 仍然可以在 DataTables 中使用,因为它可以方便且具有向后兼容性,但通常情况下,现在建议优先使用 mData 而非 fnRender。
结论
我们在这里看到了表中使用的复杂数据的复杂性,即使单个数据点也可以根据数据的用例有多种可能的形式。在 DataTables 中使用 mData 作为函数,使我们能够轻松构建简单的数据处理函数,从而让我们能够充分利用数据的复杂性,最大程度地造福表格用户,呈现一个只需简单操作即可使用的直观界面。