使用带有 tablesorter 小部件的 simplePagination jQuery 插件的问题答案

【问题标题】：Issues using simplePagination jQuery plugin with tablesorter widget使用带有 tablesorter 小部件的 simplePagination jQuery 插件的问题
【发布时间】：2015-03-09 19:51:39
【问题描述】：

我正在使用 simplePagination jQuery 插件来执行分页和表格排序器，以对输入进行排序和过滤。我选择 'simplePagination' 而不是 'tablesorter pager' 的原因是我想为我的项目执行与 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();
    },
});

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

【问题讨论】：

标签： jquery tablesorter

【解决方案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 时，无法设置过滤器。或者问题中没有共享与过滤器小部件交互的方法。你有外部输入吗？

【讨论】：

另外，我不知道你是否见过this demo 使用自定义寻呼机控件扩展。
非常感谢您的解释，我现在可以使用它了。至于过滤器，是的，我使用外部输入，但看起来问题是我单独使用 simplePagination 和 tablesorter，我遵循了你的方法现在我的过滤问题似乎没问题..谢谢！

【解决方案2】：

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

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

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

【讨论】：