Question

我正在使用这两个很好的表插件并过滤表格：

快速搜索：https://github.com/riklomas/quicksearch
Tablesorter：https://github.com/Mottie/tablesorter

以下是DEMO：http://jsfiddle.net/cETxv/

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

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

任何人都知道如何解决这个问题？或者tableorter是否在表格之外有一个内置过滤器？

任何帮助将不胜感激！

Answer 1

a demo（位于底部）home wiki page显示如何将这两个插件与寻呼机结合使用。

基本上，您需要在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”类，因此pager插件知道何时计算已过滤的行/页

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

以上是your demo updated以及上述更改。

jQuery使用tablesort插入quicksearch

1 个答案: