从tablesorter过滤Widget不起作用

我在MVC Razor应用程序中使用Tablesorter（2.22.1），我在添加基本filter行时遇到问题。 我在bundle中添加了脚本（js插件）。

bundles.Add(new ScriptBundle("~/bundles/initTableSort").Include( "~/Scripts/libs/jquery.tablesorter.js", "~/Scripts/libs/jquery.tablesorter.widgets.js", "~/Scripts/libs/jquery.tablesorter.combined.js") ); 

我还用jquery将它包含在_Layout.html中 。 我没有使用jquery.latest.js，因为在我的项目中有不同的jquery文件（新），它们被添加到_Layout。

 @Scripts.Render("~/bundles/jquery") ... @Scripts.Render("~/bundles/initTableSort") 

我有自己的CSS，我不使用Tablesorter主题。 我的jsfunction：

 $(".tablesorter").tablesorter({ sortReset: true, sortRestart: true, widthFixed : true, textAttribute: 'data-sort', widgets: ["filter"], widgetOptions: { filter_external: '.search', filter_defaultFilter: { 1: '~{query}' }, filter_columnFilters: true, filter_placeholder: { search: 'Search...' }, filter_saveFilters: true, filter_reset: '.reset' }, headers: { 'th.smallChart, th.errorLink': { sorter: false, filter: false }, 'th.errorDifference': { sorter: 'data' } } }); 

表中的数据由foreach循环呈现，但标题和表具有所需的类/ ID。 我没有粘贴表格代码，因为它太长了，我觉得它看起来没问题。

在排序之后，重置排序（在第三次点击之后），自定义解析器工作正常，但是包含Widget’Filter’只给我一行来为每个列写一个过滤查询，但它不起作用。 我可以写一些东西，但之后不会过滤表格。 我不知道为什么。 Inspect没有显示任何错误。

拜托，有人可以帮助我，写下我做错了吗？

编辑1

我甚至使用本文档中的数据创建新项目Basic Filter Tablesorter Documentation我仍然有同样的问题，所以我做错了什么，但我不知道在哪里和哪里。

Answer 1

问题解决了

问题出现在.css主题文件中…我没有链接.css蓝色主题文件，因为我使用自己的css，但没有关于你必须添加部分.css主题文件以使用过滤的信息。

你必须只添加

 /* rows hidden by filtering (needed for child rows) */ .tablesorter .filtered { display: none; } /* ajax error row */ .tablesorter .tablesorter-errorRow td { text-align: center; cursor: pointer; background-color: #e6bf99; } 

你的.css文件，一切都很顺利。

Answer 2

如果您能提供问题演示，将会很有帮助

看到您正在使用自定义解析器来获取单元格数据属性，我想分享这已经是内置的; 设置textAttribute选项以匹配您的数据属性：

 $(".tablesorter").tablesorter({ sortReset: true, sortRestart: true, textAttribute: 'data-sort', widgets: ["filter"], widgetOptions: { filter_external: '.search', filter_defaultFilter: { 1: '~{query}' }, filter_columnFilters: true, filter_placeholder: { search: 'Search...' }, filter_saveFilters: true, filter_reset: '.reset' }, headers: { 'th.smallChart, th.errorLink': { sorter: false } } }); 

希望这一改变能解决您遇到的问题。