DataTables 1.8 新增功能

DataTables 1.8 构建于先前各版本平台的基础之上,扩展 DataTables 的功能,旨在为开发者带来更高的灵活性,打造面向未来的应用。虽然最终用户界面未有何重大变化,不过您会发现部分改动使 DataTables 变得更加灵活好用。

主要新增功能

  • 扩展的数据源选项
    • 带对象的服务器端处理演示 | 带对象的 Ajax 源演示 | 带子数组的对象演示 | 深度数据源演示
    • 过去使用 Ajax 时,DataTables 要求使用简单二维数据数组,长度需严格符合要求。DataTables 1.8 现在允许您使用对象数组(或数组),拥有任意数量的所需属性。如要针对某个表列访问属性,请为目标表列使用 mDataProp 选项。此选项可以是整数(用于数组索引,这是默认值),也可以是字符串(用于对象属性)。此外,您可以在字符串中使用点分对象标注来指定一个任意深度的嵌套对象 - 例如“object.prop”。这在存储诸如详细行(fnOpen)或数据库 ID 之类的元信息时十分有用。
  • 复杂表头
    • 带隐藏列的 Colspan 演示
    • 1.8 引入了超级灵活的列头和表尾支持。过去含有 colspan/rowspan 的表头不支持列可见性,但现在您可以按需对列分组并显示/隐藏它们。这与核心紧密集成,使得 ColVis 等额外功能可以正常使用复杂表头。
  • 性能
    • 引用渲染演示
    • 使用来自 Ajax 或 Javascript 的数据时,现在可以选择将表行和单元格 DOM 元素的创建推迟(bDeferRender 设为 true,默认为 false),直到实际需要在指定页面中显示时才会创建。这将极大提升初始化速度,因为您的浏览器无需为表格创建节点。这使用户可以轻松处理拥有数千行的 Ajax 源表格。请注意,这不适用于 DOM 源的数据,而服务器端处理仍然可轻松处理数百万行数据。
  • 渐进增强(TBODY 中的 TH 元素)
    • 借助 DataTables 1.8,现在可以在表格的 TBODY 中使用 TH 元素,这从渐进增强的角度来看很重要,因为 TH 元素具有语义意义,此外它还可以使用 CSS 选择器更轻松地设置表格样式。

开发者增强功能

  • 自动添加行 ID 和类
    • 自动添加 ID 演示
    • 在使用非 DOM 源的数据时(例如服务器端处理时),直接为行添加 ID 或类名通常非常有用。DataTables 现在提供了一个选项,只需为对象的 DT_RowId 和/或 DT_RowClass(用作行数据源的一部分)指定一个值即可自动为每行添加一个 ID 和/或类。
  • Ajax 源数据属性配置
    • Ajax 自定属性数据源演示
    • 在获取 Ajax 数据(无论是 Ajax 来源数据还是服务器端处理)时,您现在可以指定希望 DataTables 用于表数据的参数读取(其以前以 aaData 硬编码),使用 sAjaxDataProp 属性。此外,在使用 Ajax 来源数据(非服务器端处理)时,该选项可以设置为空字符串,这会告知 DataTables 您将直接向其提供一个数组,而不是需要其读取对象的属性。
  • 空列
    • 空数据源演示
    • 在某些表中,可能无需指定列的任何数据源,因为其内容是自动生成的(例如,使用 fnRender)。对于 CRUD 界面来说,这非常常见,例如用于新增、编辑和删除的列。您现在可以使用 mDataProp 设置为 null 来指定列没有数据源。DataTables 会将此列呈现为空值。
  • 可访问性
    • 延迟加载演示
    • 使用服务器端处理时,表格首先要做的就是向服务器发出请求以获取新数据。当 bDeferLoading 选项设置为 true(默认情况下为 false)时,不再需要这样做。这样做的好处在于,您可以通过直接将第一组显示插入到 HTML 中来提高表格的可访问性,DataTables 会在此基础上进行构建。
  • 单元测试
    • 随着 DataTables 中引入的数据源选项的扩展选项,保持单元测试套件的最新状态至关重要。所有新的初始化参数都有单元测试,测试套件现在有超过 2500 个测试。因此,您可以放心,DataTables 非常稳定。
  • fnGetData 扩展
    • API 方法 fnGetData 现在有一个附加选项来获取单个单元格的数据。给该方法传递一个参数时,fnGetData 将获取给定行的数据源对象(无论该对象是什么,使用新的扩展数据源选项)。使用两个参数时,fnGetData 会读取给定的行/列数据,方法是从您的数据源对象中读取数据,就像对表格显示所做的一样。
  • 详细行更灵活
    • 通过允许将 jQuery 对象、DOM 元素或 HTML 字符串传递给 fnOpen(作为第二个参数)以插入到新创建的行中,使其更灵活。

除了所有这些新功能之外,还有广泛的错误修复和内部更新。要阅读完整的版本说明,请查看 版本说明