TablePress 文档:DataTables JavaScript 特性

DataTables JavaScript 库(一个 jQuery 插件)是 WordPress 表格插件 TablePress 的一个附加特性(插件),为 TablePress 表格提供诸如排序、分页(可改变长度)、滚动和过滤/搜索表格等功能。该插件由 Allan Jardine 编写,需要的话可以参考其自己的文档

该 jQuery 插件能够为 TablePress 提供诸如排序、分页(可改变长度)、滚动和过滤/搜索表格。要启用该插件,请在表格的编辑页面勾选相应选项。

用户可以单独为每个表格决定是否启用 DataTables 库(请参考表格选项文档),并且可以单独选择要启用的功能。

1. 注意事项

请确保你的主题文件中的“footer.php”包含下面的语句:

<?php wp_footer(); ?>

否则 DataTables 库将无法工作!

该库的 JavaScript 文件存放在插件文件夹下的子文件夹“js”中。它需要使用 jQuery 库来工作(WordPress 中已包含该 jQuery,会在您网站的每个页面的头部加载并执行)。

2. 自定义命令

用户还可以根据 DataTables 文档的说明将自定义命令加入到“自定义命令”文本区域。每个 TablePress 表格都有自己独立的“自定义命令”配置,位于该表格编辑页面。在编辑表格时,滚动到下面的“DataTables JavaScript 库特性”一节,最后一行即是“自定义命令”,将对应的指令填到其后的文本区域即可。如果有多条自定义命令,请使用英文半角逗号 , 隔开。

也可以使用自定义插件通过特定的插件钩子(Plugin Hooks)来添加自己的指令( 请参考 TablePress 扩展页面以获取一些示例)。

3. 自定义命令举例

以下示例均默认表格已按照上面的说明启用了 DataTables JavaScript 库特性。

特别提示

DataTables 默认的内部编号是从 0 开始的,即,第 1 列的内部编号是 0。并且,如果有隐藏的列,改列是不计算在这个内部编号之内的,换句话说,就是它只计算用户在页面上能看到的行和列。

同时,如果表格中使用了跨行或者跨列(即,合并单元格),则 DataTables JavaScript 库不起作用。

a. 默认排序

aaSorting 指令可用于定义表格默认排序方式。在页面加载时,表格会按照指定的方式进行排序。如果不使用该指令,则默认是按照第 1 列升序排列。

要按照第 2 列降序排列,命令为:

"aaSorting": [1,'desc']

也可以同时组合多列进行排序,这个在作为第一排序标准的列里有值相同的行时很有用。比如,一个表格的第 2 列是年龄(岁数),第 3 列是生日月份。希望默认按照年龄从大到小排序,当年龄相同时按照生日月份从小到大排序。则自定义指令为:

"aaSorting": [[2,'desc'], [3,'asc']]

这里两个排序标准 [2,'asc'] [3,'desc'] 按顺序放在一个 [ ] 之中,并用英文半角逗号隔开。

B. 排序特性设置

默认情况下,用户在页面上点击表格的第一行(表头)的某个单元格的时候,表格内容会按照该单元格所在列的内容进行交替排序:第一次点击升序排列,第二次点击降序排列,……

如果要改变默认的点击排序行为方式,比如针对某列只允许进行降序排列等,要用到自定义指令 asSorting。而 asSorting 需要在列定义指令 aoColumnDefs 中定义。

例如,要指定表格中第 2 列只能升序排列,第 3、4 两列只能点一次降序排列、点第二次升序排列,则自定义指令为:

"aoColumnDefs": [
      { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
      { "asSorting": [ "desc", "asc" ], "aTargets": [ 2,3 ] }
    ]

虽然这里该指令显示为 4 行,但是在“自定义命令”文本区域中还是 1 行。

c. 不让某些列排序

如果不让用户针对某些列排序,则使用 bSortable 指令。该指令也需要在列定义指令 aoColumnDefs 中定义。详见 TablePress 仅使指定列可排序

DataTables 还有很多自定义命令,这里不能一一举例。如果有疑问,请查看其文档或者到水景一页的讨论区相应板块留言说明,水景一页会尽力帮忙提供解决方法。

这是 WordPress 表格插件 TablePress 的简体中文说明文档的第七篇,介绍了 TablePress 使用的 DataTables 表格操作 JavaScript 库函数的一些特点和使用方法。请访问 TablePress 使用及开发文档页面获取其它方面的说明文档。©

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/tablepress-doc_datatables/>。转载请保留此信息及相应链接。

4 条关于 “TablePress 文档:DataTables JavaScript 特性” 的评论

  1. 引用通告: TablePress 扩展:修改 DataTables 字符串 | 水景一页

  2. 引用通告: TablePress 扩展:表格行顺序 | 水景一页

  3. 引用通告: TablePress FAQ: 排序等 JS 功能不工作 | 水景一页

  4. 引用通告: TablePress 扩展:DataTables 表格列过滤微件 | 水景一页

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)