TablePress 常见问题:仅使指定列可排序

TablePress 是 WordPress 上的一款功能非常强大的表格工具。除了提供基本的表格管理和发布功能外,还使用 DataTables JavaScript 库来提供对表格的排序、查询和分页等功能。默认情况下,针对某个表格启用排序功能后,该表格的所有列都是可排序的,如果需要指定某些特定列才可执行排序,可以参考下面的操作。

因为这些功能是针对某个表格 DataTables 属性来设置的,需要编辑该表格,通过编写相应的属性选项来完成。

要打开编辑某表格的 DataTables 属性,请先打开 WordPress 管理后台的 工具 ——> 表格(或者 TablePress) 页面,鼠标悬停在要编辑的表格上面,然后点选 编辑,以打开该表格的编辑页面。

在该表格的编辑页面,接着向下浏览到 DataTables JavaScript 库特性部分,如下图所示(因为这个图截的比较早,可能看着稍稍有点不同,但是应该不至于引起误会,就不重新截图了)。

TablePress 的数据表 JavaScript 特性(DataTables JavaScript)自定义命令设置

TablePress 的数据表 JavaScript 特性(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/>。转载请保留此信息及相应链接。

1 条关于 “TablePress 常见问题:仅使指定列可排序” 的评论

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

雁过留声,人过留名

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

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