Question

我使用simplePagination jQuery插件来执行分页和表格排序，以便对输入进行排序和过滤。我之所以选择简单的选择＆＃39; over＆＃39; tablesorter pager＆＃39;因为我想执行与我的项目的simplePagination执行类似的功能。但是，在使用tablesorter小部件和simplePagination插件时，我发现了一些问题/冲突。问题： 1）我无法再显示每页所需的记录（即：页面上的10条记录）。 2）我在搜索框中输入时无法过滤项目。

下面的

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

tablesorter：JS

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

simplePagination：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

如果您想使用simplePagination，则需要在寻呼机插件或小部件旁边使用它。 Here is a demo使用寻呼机小部件：

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

它对我有用，绝对不是最好的方法，但就目前而言，它很好!! :)

使用simplePagination jQuery插件和tablesorter小部件的问题

2 个答案: