TablePress 是 WordPress 上的一款功能非常强大的表格工具。除了提供基本的表格管理和发布功能外,还使用 DataTables JavaScript 库来提供对表格的排序、查询和分页等功能。默认情况下,针对某个表格启用排序功能后,该表格的所有列都是可排序的,如果需要指定某些特定列才可执行排序,可以参考下面的操作。
因为这些功能是针对某个表格 DataTables 属性来设置的,需要编辑该表格,通过编写相应的属性选项来完成。
要打开编辑某表格的 DataTables 属性,请先打开 WordPress 管理后台的 工具 ——> 表格(或者 TablePress) 页面,鼠标悬停在要编辑的表格上面,然后点选 编辑,以打开该表格的编辑页面。
在该表格的编辑页面,接着向下浏览到 DataTables JavaScript 库特性部分,如下图所示(因为这个图截的比较早,可能看着稍稍有点不同,但是应该不至于引起误会,就不重新截图了)。
在上图中 自定义命令 部分的文本编辑区域输入对应的 DataTables 指令,然后单击下面的 保存更改 按钮。
所谓的自定义命令,就是控制 DataTables 功能的选项设置, DataTables 网站有非常详细的介绍。
1. 指定特定的列进行排序¶
比如,要使表格的第 2 列可排序而其它列不可排序,请输入下面的语句:
"aoColumnDefs": [ { "bSortable": true, "aTargets": [ 1 ] }, { "bSortable": false, "aTargets": [ "_all" ] }]
其中:
"aoColumnDefs":
表示要自定义的对象是 Column(列);- 之后最外层的
[ ]
里面的内容就是自定义的选项值,这里包含两项,分别用{ }
括起来,两个{ }
之间用英文的逗号,
分隔; - 第一个
{ }
定义了可以被排序的列的标号,bSortable 是 DataTables 内建的“可排序”属性值,而 aTargets 则指定该属性值应用的对象。注意,因为表格的行和列都是从 0 开始计算,所以第 2 列这里就用了数字 1; - 当然,这里说的是从左到右数的,如果要从右往左数,可以用负数;
- 以此类推,如果要使第 2、4 列可排序,则将其中的 1 改为
1,3
,数字间用英文的逗号,
分隔; - 第二个
{ }
接着定义了不可被排序的列的标号,这里使用 false 指定 bSortable 属性,使用 _all 表示所有该表格中的所有列,但是因为前面指定了需要可排序的列,所以对于前面指定的列,程序优先执行前一设置。
类似的,如果列数比较多,而仅仅希望指定其中几个不能被排序,比如第 1、2 两列不能排序,则自定义命令为:
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,2 ] } ]
2. 指定排序方向¶
再扯远点吧。还可以用下面的自定义命令来控制默认的排序方向。
默认情况下,启用排序功能后,点击表格的表头(第一行)的某个单元格时,可以让表格的各行按照该列的内容升序(或从小到大、或由低到高)排列,再点一次就改为降序排列。即,[ ‘asc’, ‘desc’ ]。
如果希望将默认的排序方式改为,点一次降序,再点一次改为升序,就使用下面的指令。当然,同时也要指定作用的列的范围:
"aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ 1,2,3,4 ] } ]
甚至还可以针对不同列指定不同的排序方式,也许可以限定某些列只能有一种排序方向。。比如下面的自定义命令,让第2列只能升序排列;第3列点击时使用的排序方向依次为降序、升序、升序;第4列则只能降序排列。
"aoColumnDefs": [ { "asSorting": [ "asc" ], "aTargets": [ 1 ] }, { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] }, { "asSorting": [ "desc" ], "aTargets": [ 3 ] } ]
这个设置还是挺简单的吧。更多设置可以参考 DataTables 的文档,其中关于表格列的指令位于 Columns 页面。那里还有多个指令可以设置,有些直接通过 TablePress 的自定义 CSS 就能解决了,有些则只能通过 DataTables 的自定义命令了。
如果需要关于 TablePress 的其它帮助,请访问 TablePress 中文页面获取更多信息。TablePress 常见问题页面还有更多自定义 CSS 样式的示例及其他问题的解决方法,欢迎查阅。©
本文发表于水景一页。永久链接:<https://cnzhx.net/blog/tablepress-faq_only-selected-columns-sortable/>。转载请保留此信息及相应链接。
引用通告: TablePress 扩展:表格行顺序 | 水景一页