将jquery.tablesorter.widgets.js嵌入HTML

Question

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

Reference:https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js

问题：将上述代码嵌入我的HTML时，过滤不起作用。脚本似乎正在执行，因为我可以输入文本进行过滤，但实际的过滤没有执行。看起来结果是动态生成的。

嵌入jquery和基础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>

- angeledsa

Answer 1

jquery.tablesorter.widgets.js文件仅包含几个经常使用的小部件，不包含tablesorter核心插件，这就是为什么演示程序无法正常工作的原因。

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

- jquery.tablesorter.js：

- tablesorter核心。 - 斑马线小部件。

- jquery.tablesorter.widgets.js：

- 存储小部件 - UI主题小部件 - 列小部件 - 过滤小部件 - 固定标题小部件 - 可调整大小小部件 - 保存排序小部件

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

- Mottie

---

非常感谢您的回复！然而，我使用“combined”脚本仍然存在同样的问题。除了过滤功能之外，一切正常。我将.js文件嵌入到<script>标签中，并与jquery核心一起放在我的表格页面上，以便不需要引用其他文件。是否需要修改某些内容或者脚本的性质要求它在外部.js文件中执行？将脚本引用外部文件可以使过滤器按预期工作。再次感谢！ - angeledsa

请分享用于初始化tablesorter并应用筛选小部件的代码。 - Mottie

请查看我的编辑后的问题 - 我已经包含了初始化代码。 - angeledsa

我已经解决了这个问题 - 实际上它与 CSS 中的一个错误有关。谢谢！ - angeledsa