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 表格列过滤微件 | 水景一页

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>