在HTML

Question

我正在尝试将jquery.tablesorter.widgets.js脚本嵌入到HTML文件中，以便我可以使用单个HTML文件与其他人共享可排序/可过滤的数据。具体来说，我正在使用过滤小工具。

参考：https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js

问题：在我的HTML中嵌入上述代码时，过滤功能无效。该脚本似乎正在执行，因为我能够输入要过滤的文本，但不执行实际过滤。似乎结果是动态产生的。

嵌入jquery和base tablesorter脚本（用于排序）可以根据需要工作。

我试图完成的是什么？

由于

编辑：初始化代码

<script>
    $(function(){
  $('table').tablesorter({
 theme:'blue',
    widgets: [ 'zebra', 'resizable', 'stickyHeaders', 'filter' ],
    widgetOptions: {
      resizable: true,
      resizable_widths : [ '15%', '15%', '10px', ],
      resizable_targetLast : false,
      filter_cssFilter   : '',
      filter_childRows   : false,
      filter_hideFilters : false,
      filter_searchDelay : 300,
      filter_startsWith  : false,
      filter_external : '.search',
      filter_columnFilters: true,
      filter_placeholder: { search : 'Filter...' },
      filter_saveFilters : true,
      filter_reset: '.reset',
      }
      });
});
    </script>

Answer 1

jquery.tablesorter.widgets.js文件只包含一些常用的小部件。它不包含tablesorter核心插件，这就是演示不适合你的原因。

如果要包含两者，请改用“合并”文件： https://mottie.github.io/tablesorter/js/jquery.tablesorter.combined.js

“合并”文件包括：

• jquery.tablesorter.js：
  • tablesorter core。
  • zebra widget。
• jquery.tablesorter.widgets.js：
  • 存储小部件
  • uitheme widget
  • columns小部件
  • 过滤小部件
  • stickyHeaders小部件
  • 可调整大小的小部件
  • saveSort小工具

如果您不想包含所有这些小部件，可以使用npm，grunt和包含所有设置的json文件创建custom build。此构建不会将核心jquery.tablesorter.js文件与自定义窗口小部件文件合并，因此如果您愿意，则必须手动组合它们。