DataTables 1.10 新功能

DataTables 1.10 经过了大量的工作,旨在改善使用 DataTables 的开发人员以及创建的表片面的 DataTables 体验。

主要新特性

DataTables 1.10 出现很多令人激动的新特性,包括

新的 API

这是自最初发布以来 DataTables 中最大的变化!DataTables 1.10 中提供了一个全新的 API,它具有 大量可用的方法。基于多年的经验并且知道旧的 API 通常用于什么,新 API 更现代、经过深思熟虑、简洁、简单且富有表现力。

可以通过构造函数访问新 API

var table = $('#myTable').DataTable();

(请注意 DataTable 中的大写 D)。小写 d 将返回一个 jQuery 对象,该对象由 DataTables 1.9 的 API 方法增强。这种新的 API 完全向后兼容,旧的 API 继续可用。但是,如果您可能的话,建议您使用新的 API(您会更喜欢它的!)。

手册 详细说明了新的 API 及其使用方法。

骆驼大小写法

以前版本的 DataTables 为其公共 API 使用了匈牙利表示法。这与 JavaScript 社区中的其他部分非常不一致,并且是通过的一个相当大的摩擦源。对于 1.10,DataTables 现在接受参数的骆驼大小写法和原始匈牙利表示法,骆驼大小写法是首选并且记录在案。与 API 一样,这项更改完全向后兼容。

提供了一个 指南,说明了匈牙利表示法的骆驼大小写法等效形式,包括如果您想了解如何使用新命名方案,则对命名和 API 约定进行了更新。

新的网站

无论库的实际特性如何,文档都是软件库的一个关键特性。虽然 DataTables 文档一直非常适合开源库,但目标是让文档尽可能最好,而不仅仅是好。为此,DataTables 网站已经过完全重新设计,并且已经为 DataTables 1.10 重新编写了大部分文档并进行了全面更新。该网站现在主要分为

  • 手册 - 如何使用 DataTables 及其主要特性的概述
  • 参考 - DataTables 提供的每个选项、API 方法和事件的详细信息

还有许多其他部分,例如 示例附加内容插件,但手册和参考是 DataTables 文档的基石。

现在很多页面还可以发布评论,因此,您可以与使用 DataTables 的其他开发者分享有用的信息。

新样式表

DataTables 样式表已经过彻底重写,能够为您的表格提供现代风格,功能丰富,且易于自定义。DataTables 样式表通过分配给 DataTable 的类名称提供很多样式选项,请参见 类名称。此外,现在提供一个在线样式定制器,允许通过简单的网络界面更改表格的列方案。

使用 BootstrapFoundationjQuery UI 进行样式设置现在也已在新网站中进行了详尽的说明,并且是 DataTables 未来发展的关键组成部分。

其他功能

除了上面详细介绍的主要变化外,DataTables 1.10 中还有许多新的小功能,但都是至关重要的。

内置分页改进

内置分页控件已得到扩展,可显示省略号(当数字断开时),以这种可视方式表示最终用户中的数字间隔。这样有助于提高对显示数据的访问性。内置分页选项也已扩展,包括以下四个选项:

  • simple - 仅“上一个”和“下一个”按钮
  • simple_numbers - “上一个”和“下一个”按钮加页码
  • full - “首页”、“上一个”、“下一个”和“末页”按钮
  • full_numbers - “首页”、“上一个”、“下一个”和“末页”按钮加页码

请参见 pagingType 了解更多信息。

HTML 5 data-* 属性支持

正交数据是任何复杂表格中重要的一部分,提供了对相同数据的不同表示执行不同操作的能力。DataTables 1.10 提供了使用 HTML 5 data-* 属性为处理提供正交数据的能力。请参见 显示此内容的一个示例

改进的内置排序和类型检测

DataTables 在这个版本中已经扩展自动检测和排序不同数据类型的能力,以包括 1.10 之前添加的最常见的插件。具体来说,DataTables 可以检测并排序:

  • 格式化的数字数据(例如 1,200
  • 货币数据(例如 $3,500
  • 百分比信息(例如 95%
  • 带有 HTML 包装的数字数据(例如 <span>4,500</span>

大多数情况下,很多 排序插件仍然非常有用,但 DataTables 的此扩展功能即将意味着不再需要新插件了。

性能

一个软件库始终最重要的方面在于它的性能。通过一些内部更改(由于移除了 fnRender - 请参见下文,因此成为可能),这个版本的 DataTables 大大改善了大型数据集的性能。

更简单的 ajax 处理

1.10 中 DataTables 中可配置的 Ajax 通过新的 ajax 属性得到了极大改进。这个新选项可以作为一个对象给出,直接映射到 DataTables 用来从服务器请求数据的 jQuery Ajax 对象,提供了 jQuery.ajax 选项 的完整数组。例如,要发出 POST 请求:

$('#myTable').DataTable( {
  ajax: {
    url: '/data',
    type: 'POST'
  }
} );

结合新的 ajax.reload()ajax.url() 方法,更轻松地在 DataTables 1.10 中处理 Ajax 数据。

从右到左布局

DataTables 现在支持在 CSS 中使用 direction: rtl 选项设置的文档。按照这种方式设置时,某些浏览器会在可滚动容器的左侧显示滚动条,之前会造成问题,但现在在 DataTables 1.10 中已得到完全支持。

已移除

以上改进得益于移除了 DataTables 1.9 的三项功能——已在 1.9 中弃用,并计划在 1.10 中移除。

fnRender

旧的 fnRender 选项提供了一种在创建单元格时操作单元格的方法。然而,它作为参数提供了一个令人困惑的选项列表,并在 DataTables 内部需要一个特定结构,从而导致性能问题。删除 fnRender 已显著改善了 DataTables 中大型数据集的性能,并提供了将对象实例作为数据源对象(例如 Knockout 可观察对象)提供给 DataTables 的能力。

除了 fnRendercolumns.rendercolumns.createdCell 选项可用,提供更大的灵活性,以及更一致的接口。

bScrollInfinite

DataTables 1.9 通过 bScrollInfinite 选项显示无限滚动网格的内置能力,由于它导致 API 中不一致,因此已将其移除。移除也显著简化了内部代码。

替代 bScrollInfinite 的建议是使用 DataTables 的Scroller 扩展。

基于 Cookie 的状态保存

基于 Cookie 的状态保存,在 DataTables 1.10 中已替换为基于 localStorage 的状态保存。Cookie 具有 4KiB 的限制,且非常受限,并且由于它们是每个 HTTP 请求的一部分,因此会产生性能损失。localStorage 快捷且更灵活,在 DataTables 1.10 中用作状态信息默认存储。

IE6/7 中不提供 localStorage。因此,这些浏览器中不支持 DataTables 的内置状态保存,状态保存会静默失败。stateLoadCallbackstateSaveCallback 参数可用于提供一个合适的函数,以使用 cookie。

相关文档

这篇文档包含有关新功能的一般信息,有关升级到 1.10 的各个主题的更详细信息,可以在以下文档中找到: