После некоторого возни с этой проблемой я пришел к выводу, что проблемы возникают при комбинированном использовании jQuery Tablesorter + jQuery TablesorterPager. Без пейджера удаление строки и выполнение и "обновление" достаточно.
Когда вы также включаете пейджер, это становится намного труднее сделать правильно (как вы правильно заметили, есть некоторые проблемы с кэшированием).
Но главная причина вашей проблемы заключается в том, что jQuery Tablesorter не считается используемым для таблиц, которые вы намереваетесь изменить (в смысле добавления / удаления строк). И это относится еще больше, когда вы дополнительно используете TablesorterPager. Просто перечитайте описание jQuery Tablesorter
tablesorter - это плагин jQuery для
превращение стандартной таблицы HTML с
THEAD и TBODY теги в сортируемый
таблица без обновления страницы.
Четкая и краткая область применения TableSorter. Он даже не упоминает ajax, редактировать, удалять, добавлять, ..... или подобные термины на странице. Это только для сортировки статической таблицы.
Таким образом, реальное решение ... начать поиск другого jQuery-плагина "Table", который был создан с самого начала с намерением / возможностью изменения таблицы. И который поддерживает это по умолчанию (удаление, добавление, ....)
Хорошо, но вот решение для:
jQuery Tablesorter + TablesorterPager удалить строки (TR)
Быстрое копирование-вставка исходного кода javascript (HTML на основе Пример TablesorterPager )
// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
//aka cleanTableBody from TableSorter code
if($.browser.msie) {
function empty() {
while ( this.firstChild ) this.removeChild( this.firstChild );
}
empty.apply(tbl.tBodies[0]);
} else {
tbl.tBodies[0].innerHTML = "";
}
jQuery.each(tbl.config.rowsCopy, function() {
tbl.tBodies[0].appendChild(this.get(0));
});
}
//removes the passed in row and updates the tablesorter+pager
function remove(tr, table) {
//pager modifies actual DOM table to have only #pagesize TR's
//thus we need to repopulate from the cache first
repopulateTableBody(table.get(0));
var index = $("tr", table).index(tr)-2;
var c = table.get(0).config;
tr.remove();
//remove row from cache too
c.rowsCopy.remove(index);
c.totalRows = c.rowsCopy.length;
c.totalPages = Math.ceil(c.totalRows / config.size);
//now update
table.trigger("update");
//simulate user switches page to get pager to update too
index = c.page < c.totalPages-1;
$(".next").trigger("click");
if(index)
$(".prev").trigger("click");
}
$(function() {
var table;
//make all students with Major Languages removable
$('table td:contains("Languages")').css("background-color", "red").live("click", function() {
remove($(this).parents('tr').eq(0), table);
});
//create tablesorter+pager
// CHANGED HERE OOPS
// var table = $("table#tablesorter");
table = $("table#tablesorter");
table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
.tablesorterPager( { container: $("#pager")} );
});
Я сделал для вас тестовую страницу с моим решением (нажмите на красный TD ==, удаляя эту строку).
http://jsbin.com/uburo (http://jsbin.com/uburo/edit для источника)
Если остается вопрос о том, как / почему / .... Комментарий