TablePress FAQ: 排序等 JS 功能不工作

TablePress 是 WordPress 的一个管理和发布表格的插件,它使用 DataTables JavaScript 库来提供诸如表格排序、过滤、分页等特色功能。如果在“编辑”表格时已经选中了“使用 DataTables”的选项,但是却并没有排序、搜索、分页等功能,通常意味着 JavaScript 出问题了。

导致这一问题的最常见原因是 jQuery JavaScript 库的版本太低。虽然 WordPress 发布时已经内置了较新版本的 jQuery,但是某些主题或者插件还是可能会加载旧版本的 jQuery 库。

检查这种问题的一般步骤是,

  1. 检查是否正确启用了 TablePress 中该表格的 DataTables Javascript 库特性;
  2. 检查是否页面模板中的 wp_header() 和 wp_footer() 都没问题;
  3. 检查页面源代码中 jQuery 是否在 TablePress 的 js 之前加载了。
  4. 临时换个 WordPress 自带的主题试试看;如果问题依旧,
  5. 再禁用所有别的插件试试看。

要检查是不是这样,可以在包含该表格的页面的 HTML 源代码(要查看页面源代码,右键单击该页面然后选择“查看源(文件)”)中搜索“jquery”。应该能看到类似下面结果的代码段:

<script type='text/javascript' src='https://cnzhx.net/wp-includes/js/jquery/jquery.js'></script>

如果有多个类似的代码段,两头以 HTML 的 <script> 标记包裹,通常表示该 jquery 被多次加载了。这时应该禁止较旧版本的 jquery 库的调用。怎么知道是较旧版本呢?因为随 WordPress 发布的 jquery 都是较新版本,而 TablePress 会自动调用该版本的 jquery。那么出现的另外一个通常是较旧版本的,可能是主题带的,也可能是某个插件带进来的。也就是说,这些较旧版本的 jquery 的路径不会是,

/wp-includes/js/jquery/jquery.js

而极有可能是(中间的一部分),

/wp-content/themes/

或者是,

/wp-content/plugins/

打开当前使用的主题文件夹中的 “header.php” 文件,找到类似下面的语句:

<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.js"></script>

将这一句删除即可。

如果通过上面的处理还没有解决问题,那就再搜索源代码,看看是不是还有。比如说是某个插件引入的,将此插件禁用一下再看看是不是正常显示表格的这些 JS 功能了。

也有可能是因为别的某个插件的 JavaScript 出错了,导致 TablePress 的 JavaScript 无法正常工作。这也是一个比较常见的问题。要检查是否出现了这种问题,可以使用浏览器内置的“开发者工具”来检查。比如我在“利用 IE 的开发人员工具解决网站不兼容问题”一文中介绍过的 Internet Explorer 的开发人员工具。当然,Chrome、Firefox 和 Opera 中也都有类似的工具,个人觉得 Chrome 中的最好用。所有这些工具应该都可以在浏览当前页面的时候按键盘上的 F12 快捷键来调出。

调出“开发者工具”(Developer Tools)之后,切换到“控制台”(Console)界面,可以看到提示的一些出错信息。查看其中的 JavaScript 警告,每个错误警告应该都会指明出错的 JavaScript 文件的路径和名称(以 .js 结尾的文件名),通过文件名或者其路径就可以确定该 JavaScript 是属于哪个插件(plugins 文件夹中)。然后在 WordPress 控制面板的“插件”页面暂时禁用该插件,再查看页面是否解决了问题。

当然还可能是别的原因,但是上面提到的两种情况是最常见的。如果你无法确定问题所在,可以到水景一页的讨论区里相应板块,或者 TablePress 官方支持论坛(作者的回复一直都很及时,也很有效)提问。提问时最好附上出问题的页面的链接,以方便检查。

TablePress 常见问题(FAQ)页面列举了很多其它问题,欢迎查阅。©

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

8 条关于 “TablePress FAQ: 排序等 JS 功能不工作” 的评论

  1. 呃…你这样一改
    不就可能造成部分插件和主题功能失效
    毕竟jquery升级修改可部分接口

    • 一般出现这种问题说明主题或者插件本身的 JavaScript 就有问题了
      :D 实际上这是提醒大家遇到这种情况该升级主题或者插件了

      • 呃…使用老版的jquery没问题
        因为jquery每次升级基本上都修改了部分接口
        而且主题或插件也许没人维护了…

        • 没人维护的确是个问题啊,碰到这种情况最好就换个主题了
          话说现在 WP 更新得有点而快了,维护更新倒是没啥,就怕增加了新功能,然后就很多东西不兼容了

  2. 新年快乐,博主
    我使用该插件后,经过以上排查- -还是不能显示排序问题,请问能否帮忙解决下?
    劳烦您了

    • 新年快乐 :D
      排错是件非常复杂的事情,你需要多给一点信息,或者示例页面,这样才好帮你查看和分析。

      • 请问可以加您的QQ细说么- -还有一些更表格相关的需求,我的QQ已经在微博上私信您了,我的邮箱前面的数字也是我的QQ

        • 虽然实在没什么时间,不过还是加你了。你可能都已经休息了?
          我很少上 QQ,又有时差,下次就不知道什么时候能碰上了。插件本身没有问题,建议你检查一下:
          1. 是否正确启用了 TablePress 中该表格的 DataTables Javascript 库特性;
          2. 是否页面模板中的 wp_header() 和 wp_footer() 都没问题;
          3. 页面中 jQuery 是否在 TablePress 的 js 之前加载了。

雁过留声,人过留名

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

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