在 HTML 中嵌入 jquery.tablesorter.widgets.js

Question

我正在尝试将 jquery.tablesorter.widgets.js 脚本嵌入到 HTML 文件中，这样我就可以拥有一个 HTML 文件来与其他人共享 sortable/filterable 数据。具体来说，我正在使用过滤小部件。

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

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

嵌入 jquery 和基本表格排序器脚本（用于排序）按需要工作。

我想要实现的目标可行吗？

谢谢

编辑：初始化下面的代码

<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 文件仅包含几个 often-used 小部件。它不包含 tablesorter 核心插件，这就是演示不适合您的原因。

如果您想同时包含两者，请改用 "combined" 文件： https://mottie.github.io/tablesorter/js/jquery.tablesorter.combined.js

"combined" 文件包括：

jquery.tablesorter.js:
- tablesorter 核心。
- 斑马小部件。
jquery.tablesorter.widgets.js:
- 存储小部件
- uitheme 小部件
- 列小部件
- 过滤器小部件
- stickyHeaders 小部件
- 可调整大小的小部件
- 保存排序小部件

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

在 HTML 中嵌入 jquery.tablesorter.widgets.js

Embedding jquery.tablesorter.widgets.js in HTML

html

javascript

jquery

tablesorter