来自 tablesorter 的过滤器小部件不起作用

Question

我在 MVC Razor 应用程序中使用 Tablesorter (2.22.1)，但在添加基本筛选行时遇到问题。我在捆绑包中添加了脚本（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 主题。我的 js 函数：

$(".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'
        }
    }

});

table 中的数据由 foreach 循环呈现，但 headers 和 table 需要 classes/ids。我不粘贴 table 代码，因为它太长了，我认为它看起来没有问题。

在那次排序之后，重置排序（第三次单击后），自定义解析器工作正常，但包含小部件 'Filter' 只给我行来向每一列写入筛选查询，但它不起作用。我可以写点东西，但是 table 在那之后没有被过滤。我不知道为什么。检查没有显示任何错误。

拜托，有人可以帮我解决这个问题并写下我做错了什么吗？

编辑 1

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

Answer 1

如果您能提供该问题的演示会很有帮助

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

$(".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
        }
    }
});

希望此更改能解决您遇到的问题。

Answer 2

问题已解决

问题出在 .css 主题文件中...我没有 link .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 文件，一切正常。

来自 tablesorter 的过滤器小部件不起作用

Filter Widget from tablesorter doesn't work

javascript

asp.net-mvc

jquery

tablesorter

filter