使用带有表排序器小部件的simplePagination jQuery插件的问题 [英] Issues using simplePagination jQuery plugin with tablesorter widget

问题描述

我正在使用simplePagination jQuery插件执行分页和表排序器，以对输入进行排序和过滤.我之所以选择"tablesorter传呼机"而不是"simplePagination"，是因为我想为项目执行与simplePagination相似的功能. 但是我在使用tablesorter小部件和simplePagination插件时看到一些问题/冲突. 问题: 1)我无法再显示每页所需的记录(即:每页10条记录). 2)我在搜索框中键入内容时，无法过滤项目.

I'm using the simplePagination jQuery plugin to perform the pagination and table sorter for sorting and filtering the inputs. The reason i chose 'simplePagination' over 'tablesorter pager' as i wanted to perform similar functionality as the simplePagination perform for my project. However I'm seeing some issues/clashes while using tablesorter widget and simplePagination plugin. Issues: 1) im unable to display the required records per page (i.e: 10 records on a page) anymore. 2) im unable to filter the items when i type in the search box.

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

below is my initialization for both both plugins:

tablesorter:JS

tablesorter: JS

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

simplePagination:Js

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

以前有人遇到过类似情况吗?任何想法如何解决? 谢谢

has anyone encountered similar situation before..Any ideas how can it be resolved?? Thanks

推荐答案

如果要使用simplePagination，则需要在寻呼机插件或小部件旁边使用它. 这里是使用分页器小部件的演示:

If you want to use simplePagination, you'll need to use it along side the pager plugin or widget. Here is a demo using the pager widget:

$(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时，无法设置过滤器.或者问题中没有共享与过滤器小部件进行交互的方法.您有外部输入吗?

I'm not sure what to tell you about the filtering.. when the filter_columnFilters option set to false there is no way to set the filter. Or no way to interact with the filter widget was shared in the question. Do you have an external input?

这篇关于使用带有表排序器小部件的simplePagination jQuery插件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！