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

2023年12月13日 210次阅读

我正在尝试将 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>

最佳答案 jquery.tablesorter.widgets.js文件仅包含一些常用的小部件.它不包含tablesorter核心插件,这就是演示不适合你的原因.

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

“合并”文件包括：

> jquery.tablesorter.js：

> tablesorter核心.
>斑马小部件.

> jquery.tablesorter.widgets.js：

>存储小部件
> uitheme小部件
>列小部件
>过滤小工具
> stickyHeaders小部件
>可调整大小的小部件
> saveSort小部件

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

点赞