tablesorter после удаления строки, сортировка оставила пробел

Question

Вот что я использую this, чтобы развернуть строку в таблице. Я также создал 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'); 
}); 

Цель:

• Slide до строки при нажатии Удалить
• Сортировать должным образом без пробелов

Теперь слайд-наладочных работ. Но после разворота сортировка оставляет промежуток между рядами - удаленный ряд появляется как промежуток (не очень очевидно в кодефене). Итак, как полностью удалить строку? или почему он появился снова после сортировки?

На самом деле, если я удалить строку непосредственно без скольжения вверх, сортировка отлично работает, но клиенты, как слайд вверх ...

Answer 1

Поскольку метод .animate() является асинхронным, выполнение продолжается сразу после вызова .animate() и вы фактически вызываете обновление на 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'); 
    }); 
});