1

我正在为表格使用这两个不错的插件并过滤表格：

  1. 快速搜索：https ://github.com/riklomas/quicksearch
  2. 表格排序器：https ://github.com/Mottie/tablesorter

这是DEMO：http: //jsfiddle.net/cETxv/

我在使用 tablesorter 进行快速搜索时遇到问题。我的表格将限制为一次显示 10（默认）、20、30、40 或 50 行。问题是，如果您在超过 10 个匹配项的表中搜索（例如“wildberry”），它将在 1 页中显示所有结果；但我希望将其限制为 10（默认值），其余结果转到下一页。另一个问题是，清除搜索框后，表格将显示所有行，而不是前 10 行（默认）。

此外，加载完整表格是页面首次加载时的情况。但是我改变了操作的顺序（从调用tablesorter然后quicksearch，到调用quicksearch然后tablesorter）

任何人都知道如何解决这个问题？还是 tablesorter 在表格之外有一个内置的过滤器？

任何帮助将不胜感激！

4

1 回答 1

1

在主页 wiki 页面（底部）上有一个演示，展示了如何将这两个插件与寻呼机结合起来。

基本上，您需要在 Quicksearch 中包含这些选项：

$('#search').quicksearch('table tbody tr', {
    delay: 500,
    show: function () {
        $(this).removeClass('filtered');
        $('table').trigger('pageSet'); // reset to page 1 & update display
    },
    hide: function () {
        $(this).hide().addClass('filtered');
        $('table').trigger('pageSet'); // reset to page 1 & update display
    },
    onAfter: function () {
        $('table').trigger('update.pager');
    }
});

并向表中添加“hasFilters”类，以便寻呼机插件知道何时计算过滤的行/页

$('table').addClass('hasFilters');

这是使用上述更改更新的演示。

于 2013-11-01T15:02:39.057 回答