jquery - tablesorter-filter 和 jquery tablesorter

Question

我正在使用https://github.com/jbritten/jquery-tablesorter-filter 、jquery 表排序器插件和 jquery 表排序器分页。

当我在文档加载中加载设置并添加过滤器时，它会破坏分页。我尝试使用的每个表过滤器插件都遇到过这个问题。

var $table = $('#billing_summary_table')
.on('pagerInitialized pagerComplete', function (e, c) {
    var i, pages = '', t = [],
        cur = c.page + 1,
        start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0,
        end = cur < 3 ? 5 - cur : 2;
    for (i = start; i < end; i++) {
        if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
    }
    // make sure first and last page are included in the pagination
    if ($.inArray(1, t) === -1) { t.push(1); }
    if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); }
    // sort the list
    t = t.sort(function(a, b){ return a - b; });
    // make links and spacers
    $.each(t, function(j, v){
        pages += '<a href="#" class="' + (v === cur ? 'current' : '') + '">' + v + '</a>';
        pages += j < t.length - 1 && ( t[j+1] - 1 !== v ) ? ' ... ' : ( j >= t.length - 1 ? '' : ' ' );
    });
    $('.pagecount').html(pages);
})
.tablesorter({
    widgets: ['zebra']
})
.tablesorterPager({
    container: $(".pager"),
    size: 3,
    output: 'showing: {startRow} to {endRow} ({totalRows})',
    removeRows: false
})
.tablesorterFilter({
    filterContainer: "#filter",
    filterColumns: [0,1,2,3]
});

Answer 1

我建议你试试我的 fork of tablesorter 。原因是分页器插件有一个选项removeRows，默认情况下为false，因此所有表行仍然存在于页面上(在 DOM 中)，从而使过滤变得容易。因此，它应该可以与您提到的过滤器插件一起使用(未经测试)。

另外，请查看:

• 基本 filter widget这会向每列添加一个过滤器。
• 使用filter_anyMatch的过滤器小部件选项允许您添加自己的输入来搜索表格的所有内容。
• 使用 more than one external search input 的过滤器小部件
• A demo quicksearch plugin的与寻呼机插件结合使用。