tablesorter after removed a row, sorting left a gap

Question

Here is a what I'm using this to slide up a row in a table. I also created a codepen.

$(".tablesorter").tablesorter();

$('.remove').on('click', function(){
  $(this).closest('tr').children('td').animate({ padding: 0 }).wrapInner('<div/>').children().slideUp(function () {
    $(this).closest('tr').remove();
  });
  $(".tablesorter").trigger('update');
});

Goal:

Slide up the row when clicking Remove
Sort properly without gaps

Now the slide up works. But after sliding up the sorting leaves a gap between the rows - the removed row shows up as a gap (Not very obvious in codepen). So how to remove the row completely? or why did it show up again after sorting?

Actually, if I remove the row directly without sliding up, the sorting works perfectly, but the customers like the slide up...

Shouldn't you be triggering the update after the remove, not after the click? Try putting the trigger('update') within the slideUp callback after the remove. — BenM, Jul 11 '16 at 21:49

score 2 · Accepted Answer · answered Jul 11 '16 at 21:56

Since the .animate() method is asynchronous, execution continues immediately after you call .animate() and you are effectively calling the update on the tablesorter before the actual row is removed from the table.

Use the callback function on the animate method and update the tablesorter there.

Example:

$('.remove').on('click', function(){
   $(this).closest('tr').children('td').animate({ padding: 0 }).wrapInner('<div />').children().slideUp(function () {
        $(this).closest('tr').remove();
        $(".tablesorter").trigger('update');
    });
});

tablesorter after removed a row, sorting left a gap

1 Answers1