この問題をいじくり回した後、jQueryTablesorterとjQueryTablesorterPagerを組み合わせて使用すると問題が発生すると結論付けました。 ページャーがない場合は、行を削除して「更新」するだけで十分です。
ページャーも含めると、これを正しく行うのがはるかに難しくなります(正しく気付いたように、キャッシュの問題がいくつかあります)。
ただし、問題の主な理由は、jQuery Tablesorterが、(行の追加/削除という意味で)変更しようとしているテーブルに使用されるとは考えられていないことです。また、TablesorterPagerを追加で使用すると、これはさらに当てはまります。jQueryTablesorterの説明を読み直してください
tablesorterは、THEADタグとTBODYタグを含む標準のHTMLテーブルを、ページを更新せずに並べ替え可能なテーブルに変換するためのjQueryプラグインです。
TableSorterの明確で簡潔なアプリケーション分野。ページ上のajax、編集、削除、追加、.....または同様の用語についても言及していません。静的テーブルの並べ替え専用です。
したがって、実際の解決策は....テーブルを変更できるという意図/可能性を持って最初から構築された別のjQuery「テーブル」プラグインを探し始めることです。そして、これはデフォルトでこれをサポートします(削除、追加、....)
それでも、次の解決策があります。
jQuery Tablesorter + TablesorterPager行の削除(TR)
javascriptソースコードのクイックコピーアンドペースト( TablesorterPagerの例に基づくHTML )
// "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 )
どのように/なぜ/....コメントが残っている場合