DataTables 1.7 新特性

DataTables 1.7 的新特性众多,令人兴奋,而且其交互方式也有所改进,非常适合你们这些开发人员。有些修改细微,有些修改重大,但总体而言,DataTables 1.7 在使用过程中会更加让人舒心。希望新增功能可以使本次升级意义重大。祝工作愉快!

主要新特性

  • X 和 Y 轴滚动
    • X 轴滚动演示 | Y 轴滚动演示 | XY 轴滚动演示 | Y 轴主题滚动演示
    • 在处理大数据集但受限于小的可见区域时,有必要提供一个可视化方法,以便向终端用户表明还有更多数据可用,并使其易于访问。DataTables 中为此使用分页,但在 1.7 版本中,你可以选择启用 X 轴和 Y 轴滚动,并且它可以与分页配合使用,也可以单独使用。使用初始化参数 sScrollXsScrollY 只需设定你希望将表格限制到的高度和宽度。这两个参数可以接受任何 CSS 测量值。
  • 列定义
    • 一般目标演示 | 类目标演示 | 右侧列演示
    • 在 1.7 版本之前向 DataTables 提供特定列指令时,有必要向 aoColumns 提供一个详细信息数组,其大小与表格中列数完全匹配。当你有很多列时,或者表格大小会动态更改时,这有时会很困难。为了解决这个问题,1.7 版本引入了 aoColumnDefs,它是一个对象数组,采用了与 aoColumns 完全相同的参数,但它还有一个额外的参数 aTargets。此数组允许你使用以下方法来针对特定列(或所有列)
    • 一个字符串 - 类名称将与该列的 TH 匹配
    • 0 或一个正整数 - 从左向右计算的列索引
    • 一个负整数 - 从右向左计算的列索引
    • 字符串 "_all" - 所有列(即分配一个默认值)。aoColumns 仍然可以在 1.7 版本中使用,有时也适用,但通常现在应该优先使用 aoColumnDefs。一个列可以被多个列定义针对,按优先级递减排序,但如果定义了 aoColumns 参数,它将优先。
  • DataTables 对象检索

    • 添加行演示 | 正则表达式演示
    • DataTables 初始化期间创建的对象可以用于与 API 的所有交互。因此,需要对此对象进行引用,通常存储在一个全局变量中。在 DataTables 1.7 版本中,可以通过再次在表格上调用 $().dataTable() 函数来检索此对象,从而减轻对全局变量的需要。以下是需要注意的几点

      • 不带参数调用 - $(...).dataTable(); - 这将只是返回选择器的 DataTables 对象,如果没有找到现有表格,则创建一个新表格。
    • 使用初始化对象检索 - $(...).dataTable({"bRetrieve":true, ...}); - 在初始化后不能这样更改表格参数,但是仅使用一个对 $().dataTable() 的调用很有用。将 bRetrieve 设为 true 告诉 DataTables 您确认了这一点。
    • 重新初始化表格 - $(...).dataTable({"bDestroy":true, ...}); - 实际上,重新初始化表格是可能的,但这相当野蛮。这会销毁旧表格,然后初始化一个新表格。
    • 否则 - 一个警告将警告您将要发生什么。

用户可见功能

  • 表格信息显示中的数字格式化
    • 在表格的信息显示中格式化数字有助于在处理大数字(例如 "1,000,000")时提高可读性。回调函数 fnFormatNumber 恰好用于执行这种格式化。它获取一个数字并返回一个字符串。默认行为是输入一个逗号作为千位分隔符。
  • 智能过滤各个列
    • DataTables 中的全局筛选一直有智能过滤 - 可以在其中以任意顺序输入单词,它们仍然将匹配。1.7 将此功能引入各个列过滤。
  • 全局筛选显示在输入框中
    • 在设置全局筛选时,使用正在使用的搜索字符串填充全局筛选输入框会很有用。这有助于用户理解正在发生的事情,并在更改全局筛选时减少混乱。使用 fnFilter 设置筛选时默认启用它,但可以 fnFilter 中的第五个参数 (布尔值) 停用它。
  • 空表格文本选项
    • 在以前版本的 DataTables 中,当表格中完全没有可用数据和筛选太严格以至于没有匹配项时使用的“空表格”文本没有区分。1.7 引入了语言参数 sEmptyTable,它在没有数据时使用。如果这个参数不存在,则像以前一样使用 sZeroRecords。

开发者增强功能

  • 销毁 API 函数
    • 使用 DataTables 1.7,现在可以将 HTML 页面返回到 DataTables 初始化发生之前的状态。通过调用新的 fnDestroy API 函数,将移除 DataTables 添加到表格的所有增强,并将整个表格绘制成其基本状态。
  • HTML 数据的自动类型检测和修剪空白
    • 在 DataTables 的先前版本中,有必要明确指出是否希望 DataTables 将一列作为“html”来处理(使用 sType),这将影响排序和过滤。现在自动执行此操作。此外,将自动从数据中修剪空白,这使得在 HTML 中格式化表格时更加灵活。
  • 现在接受 null 数据
    • 在 JSON 结构中将数据的“值”设为 null 并不少见,尤其是在使用内置于 PHP、.NET 等中的 JSON 解析器时。DataTables 过去拒绝这样做,因为它不是一个显示值,但现在将它视为一个空字符串。因此,任何数据源的 null 值都可以被 DataTables 接受。
  • 轻松指定分页长度菜单
    • 长度菜单自定义演示
    • 使用 DataTables 中的语言选项一直可行,但这是一种费力的执行方式。新的初始化参数 strong>aLengthMenu 使此变得更加简单。此参数是一个一维选项数组,用于显示选项和数值,或者是一个二维数组,将第一个位置的数组用作值,将第二个位置的数组用作显示选项(对诸如“所有”的语言字符串非常有用)。
  • 启用或禁用智能过滤
    • 智能过滤对用户交互非常有用,当您只需要一个快速搜索框时,但如果要为过滤器提供正则表达式时,它可能会使事情变得混乱。现在,可以在单个列和全局过滤器中使用初始化对象中的“bSmart”或 fnFilter 中的第四个参数(布尔值)来启用和禁用智能过滤。
  • 回调函数通过 DataTables 对象范围执行
    • 初始化演示中的 API 函数
    • 在初始化回调(例如 fnDrawCallback)中使用 API 函数可能对数据检索很有用,但由于您要访问的对象在调用它们时尚未完全初始化,因此过去很难做到这一点!回调函数现在与 DataTables 对象的范围一起执行,这意味着所有 API 函数都可以通过此 this 对象来检索。

次要的新功能

  • 闭包编译器
    • DataTables 的缩小版文件现在使用谷歌的闭包编译器而非 YUI 压缩器进行编译。这使得 .min.js 文件的大小大幅下降。使用 YUI 编译器的 1.6.2 为 70K,而 1.7.0 测试版却只有 54K,尽管它有很多新功能!太棒了 - 谢谢 Google。
  • 日期和数字排序现在允许存在空值
    • 在一个被日期或数字占用的列中存在空值并不罕见。内置排序函数现在允许出现这种情况,并且会保留日期或数字排序。
  • 反 IE XHR 缓存
    • IE 和 GET XHR 常见的一个问题是它将缓存返回值,即使服务器上的数据已经发生改变。过去可以利用 fnServerData 和 POST (或一个随机变量)来解决这个问题,但现在 DataTables 对 $.ajax() 使用 jQuery 反缓存选项(一个随机变量)。
  • 在 fnDeleteRow 中不重新绘制选项
    • 一次性删除多行时,现在可以在调用 fnDeleteRow(第三个参数 - 布尔值)时告知表格不要重新绘制,从而使该操作的速度更快。在删除所需的列后,只需调用 fnDraw 以更新表格以处理更改。
  • 格式错误的 JSON 警告
    • 与使用 eval 相比,jQuery 1.4 中的内置 JSON 解析非常棒,但当它无法解析一个 JSON 字符串时,它只会调用其错误函数,而不是向用户抛出警告。因此,在 DataTables 1.7 之前,这会无声失败并可能十分令人困惑。现在,DataTables 将会发出“警告”,告诉您发生了什么。
  • 指定 cookie 前缀
    • 有时您可能希望存储状态时使用自己的 cookie 前缀,而不是使用默认前缀。现在可以使用 sCookiePrefix 来做到这一点。DataTables 1.7 中的 cookie 处理基础设施已经过重写,以便处理许多状态存储 cookie,在达到 4KiB 限制时,过去可能造成服务器错误。DataTables 现在使用智能处理来避免这种情况。

除所有这些新功能之外,还有各种错误和内部更新修正 - 例如,现在不再可能(至少不太可能)超过 4KiB cookie 限制,fnClose 将与服务器端处理配合使用。要阅读完整的版本说明,请查看版本说明