使用带有表排序器小部件的简单分页 jQuery 插件的问题

Question

我正在使用simplePagination jQuery插件来执行分页和表格排序器，以对输入进行排序和过滤。我选择"简单分页"而不是"表排序器寻呼机"的原因是因为我想执行与简单分页为我的项目执行类似的功能。但是，我在使用表格排序器小部件和简单的分页插件时看到了一些问题/冲突。问题：1） 我无法再显示每页所需的记录（即：一页 10 条记录）。2）当我在搜索框中输入时，我无法过滤项目。

以下是我对这两个插件的初始化：

表排序器：JS。

$("#table").tablesorter({
     widgets: ['zebra', 'filter'],
     widgetOptions : {
        filter_columnFilters: false
}   

简单分页：Js

perPage = 10;
$("#pagination").pagination({
    items: 20,
    itemsOnPage: perPage,
    onPageClick: function(pageNumber) { 
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;
        items.hide().slice(showFrom, showTo).show();
    },
});

以前有没有人遇到过类似的情况..任何想法如何解决？？谢谢

Answer 1

如果你想使用简单分页，你需要在寻呼机插件或小部件旁边使用它。以下是使用寻呼机小部件的演示：

$(function () {
    var perPage = 10,
        $table = $('table');
    $table.tablesorter({
        widgets: ['zebra', 'filter', 'pager'],
        widgetOptions: {
            filter_columnFilters: false,
            pager_size: perPage
        },
        initialized: function (table) {
            /* 
            Using http://flaviusmatis.github.io/simplePagination.js/
            along with the pager widget
            */
            var pager = table.config.pager;
            $("#pagination").pagination({
                cssStyle: 'compact-theme',
                items: pager.totalRows,
                itemsOnPage: pager.size,
                onPageClick: function (pageNumber) {
                    $table.trigger('pageSet', pageNumber);
                }
            });
        }
    });
});

我不确定该告诉您有关过滤的信息..当filter_columnFilters选项设置为false时，无法设置过滤器。或者问题中没有与过滤器小部件交互的方法。您有外部输入吗？

Answer 2

我找到了答案，虽然我不确定这是否是最好的方法，但只是一个解决方法，会想出更好的办法。我使用tablesorter-pager插件来确定页面上的记录：

$("#table").tablesorterPager({
    page: 0,
    size: 10,    
});

它

对我有用，这绝对不是最好的方法，但现在，它很好:)！！！