DataTables 1.10.3
任何作为 DataTables 库套件一部分组件的小版本发布通常不会成为博客帖子的缘由,而是仅在版本动态中宣布版本信息,但 DataTables 1.10.3 会看到一些新功能非常值得正式介绍。其中包括
- 读取 DOM 来源的数据到 JavaScript 对象
- 可以选择将选择器提供为函数
cells().render()
和cell().render()
API 方法iterator()
API 方法searchDelay
选项
DataTables 1.10.3 还包括 11 个错误修复,以及为该网站上提供的文档和示例进行的众多更新。
最新的 1.10.3 版本现在可以从下载页面获取,如果您希望远程托管文件,还可以在DataTables CDN上获取。另提供了完整的版本说明。
DOM 来源对象
从 HTML 表格读取数据时,在历史上 DataTables 始终将信息读入数组 - 数组中针对每列有一个条目。然而,处理基于对象的数据(通过 JSON 我们许多人都熟悉这种数据)可能有一些优点,例如容易记住参数名称(而不必记住列索引)。
将信息读入数组在 DataTables 中仍然是默认操作,但 1.10.3 引入了将信息读入对象的可能性 - 如果您使用 API 来操作数据,这会很有用。这是通过熟悉的columns.data
选项完成的。只需将其设置为您希望用于从该列读取数据的属性名称,DataTables 将为您构建对象。这还受益于columns.data
使用带有圆点对象的语法处理复杂且嵌套的对象的能力,如果您希望创建一个更复杂的数据结构,这一点会很有用。
可使用此新能力的一个正在运行的实例,显示如下方的左边的初始化如何构建如下方的右边的对象数据
$('#example').DataTable( {
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
[
{
"name": "Airi Satou",
"position": "Accountant",
"office": "Tokyo",
"age": "33",
"start_date": "2008/11/28",
"salary": "$162,700"
},
...
]
API
随 1.10 版本发布而引入的新API广受好评,并且构成了使 DataTables 作为开发人员库吸引人的一个核心部分。v1.10.3 向 API 中引入了一些新功能,这些新功能扩展了其灵活性和实用性。
选择器函数
让 DataTables API 如此强悍的一个原因是针对 rows()
、columns()
和 cells()
的选择器选项,它提供了基于表格结构从表格中按自然方式选择元素的能力,并且建立在 jQuery 选择器选项的灵活性之上。
v1.10.3 中引入了为这些方法(及其单数对应项)提供选择器的功能,你(使用 DataTables 的开发者)由此可以完全控制元素是否匹配。这在搜索数据或使用其他复杂选择算法时尤其有用。
当作为函数使用时,这三种选择器类型(row-selector
、column-selector
和 cell-selector
)共享一个公共参数签名(详情请参阅每种类型的文档)
- 索引
- 数据
- 节点
如果某个项目要包含在结果集中,该函数应该返回 true
,否则返回 false
。
举例来说,下面的代码将 rows()
与 row-selector
函数一起使用,从一个表格中选择所有在每一行的 data 中将 overdue
属性设为 true
的行。然后将一个 class 添加到这些行中以高亮显示它们
var table = $('#timetable').DataTable();
var rows = table
.rows( function ( idx, data, node ) {
return data.overdue ? true : false;
} )
.nodes();
$(rows).addClass('highlight');
迭代器
当使用 rows()
、columns()
和 cells()
方法时,通常需要循环遍历选择器找到的项目并且对这些项目执行某些操作或从中读取信息。这通常使用 each()
方法或 for
循环来完成,两者都能很好地工作,然而 DataTables 在 API 中内部使用的方法叫做 iterator()
,它为你处理所选索引的循环逻辑。v1.10.3 为外部使用提供了此方法。
存在许多不同的循环选项,如果您希望使用此方法,我建议您仔细阅读 iterator()
文档 - 它可能是 DataTables API 中最复杂的方法,并且主要供插件和扩展作者使用。
渲染器
DataTables 处理 正交数据 的能力和 columns.render
的格式化选项非常强大,但你通常希望能够访问呈现的数据(例如,在基于表格数据构建用于提供过滤选项的 select
输入时)。
行().数据()
和其他 data()
方法均提供对底层数据的访问,但 v1.10.3 引入了 单元格().渲染()
和 单元格().渲染()
方法,能够触发对所请求特定数据类型的呈现。
搜索延迟
最后,一个相对较小但却非常受欢迎的功能是可以控制内置搜索输入的节流速率。DataTables 1.10 引入了一个在对默认搜索输入使用服务器端处理时的 400mS 节流,将向服务器发出的 Ajax 请求的次数最大程度减少到每 400mS 一次,而不管用户在输入中键入的速度有多快。
现在可以通过 搜索延迟
选项在服务器端和客户端处理中都可控制这个节流速率。默认值为服务器端处理的 400mS 和客户端处理的 0,但是可以使用此新选项按你的意愿定制它。
即将推出...
开发 DataTables 1.10.3 是一件非常有趣的事,我希望你们都能从它带来的增强功能中受益。这里有一些新功能,虽然每一个新功能都相对较小,但它们都补充了整个库的可定制性和灵活性。这些功能几乎算得上是一次重大新发布,但与其为 1.11 预留这些增强功能,我更希望尽快发布它们。
对 v1.11 的开发仍在继续,并计划对 DataTables 中搜索功能的工作原理进行一次大修。期望 v1.11 于 2015 年上半年发布。
同时,Editor v1.4 的开发工作仍在继续,这将引入 C# 库和 .NET 示例,计划紧随其后发布 v1.5。AutoFill、KeyTable 和 TableTools 也会在短时间内迎来重大更新。
尽情享受!