jQuery 表排序器 + 分页，分页所有表

jQuery Tablesorter + pagination, repaginate all table

本文关键字：分页 排序 jQuery      更新时间：2023-09-26

>我有一个包含表格的页面。在这个表上，我使用两个插件：表排序器和表分页。

我想在用户尝试对行进行排序时对整个表进行分页。问题是：当我尝试对行进行排序时，tablesorter 插件只对我所在的页面的行进行排序，直到我切换到另一个页面。

我想过使用表分页的触发器：

$table.trigger('repaginate');

但我不确定这个选择，我不知道如何使用它。

我创建一个小提琴来让你更好地理解。

更新的答案

正如@Mottie指出的，行实际上不需要可见，只需要在排序后调用重新排序方法：

$("#risorse_in").bind("sortEnd", function() {
  $(this).trigger('repaginate');
});

这很好，因为没有像原始答案那样丑陋的副作用。

原始（部分错误）答案

表排序器插件仅对可见行进行排序。因此，在排序开始之前，所有行都需要可见。

此代码使它们在排序之前和重新分页后直接可见：

  $("#risorse_in").bind("sortStart", function() {
    $(this).find('tbody tr').show();
  }).bind("sortEnd", function() {
    $(this).trigger('repaginate');
  });

另外，这是更新的小提琴：https://jsfiddle.net/ceaauh63/5/

此解决方案的缺点是，其他行可能在一瞬间可见。您可以通过添加 css 规则不透明度来避免这种情况：0

到这些行：

#risorise_in:nth-child(n+4) {
  opacity: 0;
}
相关文章：