CODEWITHSUNDEEP
javascriptjquerypaginationtablesorter
DearS
DearS

Reputation: 192

jQuery Tablesorter + pagination, repaginate all table

I have a page that includes a table. On this table I use two plugins: tablesorter and table pagination.

I want to repaginate the entire table when the user try to order the rows. The problem is: when I try to order the rows, the tablesorter plugin only orders the rows of the page where I am until I switch to another page.

I thought about using the trigger of table pagination:

$table.trigger('repaginate');

but I'm not sure of this choise and I have no idea how to use it.

I create a fiddle to make you understand better.

Upvotes: 1

Views: 645

Answers (1)

Thomas Leu
Thomas Leu

Reputation: 855

Updated Answer

As @Mottie pointed out, the rows actually don't need to be visible, only the repagination method has to be invoked after the sorting:

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

That's nice, because there's no ugly side-effect as in the orginal answer.

Original (partially wrong) answer

The tablesorter plugin only sorts the visible rows. So, before the sorting starts, all rows need to be visible.

This code makes them visible before the sorting and directly after does the repagination:

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

Also, here's the updated fiddle: https://jsfiddle.net/ceaauh63/5/

The downside of this solution is that the additional rows could be visible for a split-second. You could avoid this with adding the css rule opacity: 0

to these rows:

#risorise_in:nth-child(n+4) {
  opacity: 0;
}

Upvotes: 1

Related Questions