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

我正在使用simplePagination jQuery插件来执行分页和表格排序，以便对输入进行排序和过滤。 之所以我选择’simplePagination’而不是’tablesorter pager’，因为我想执行类似于simplePagination为我的项目执行的function。 但是我在使用tablesorter widget和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，你需要在寻呼机插件或小部件旁边使用它。 以下是使用寻呼机小部件的演示 ：

 $(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 ，无法设置filter。 或者在问题中没有共享与filter小部件交互的方法。 你有外部输入吗？

Answer 2

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

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

它对我有用，绝对不是最好的方法，但就目前来说，它很好!! 🙂