从DOM中删除行后更新jQuery Tablesorter插件
我现在有一些代码隐藏了一行被删除的行，然后使用.remove（）函数将其删除。
但是我有困难是让它保持“删除”，因为每次刷新表格排序的寻呼机插件或我正在使用的filter插件插件时，删除的行重新出现，因为它们当然是缓存的。
目前的代码很简单，目前有小部件更新
$('.deleteMAP').live("click", function(){ $(this).closest('tr').css('fast', function() { $(this).remove(); $(".tablesorter").trigger("update"); $(".tablesorter").trigger("applyWidgets"); }); }) 无论如何，从pager插件的缓存和tablesorter插件中删除“行”，以便当我“更新”表以反映已删除行的事实时，它们不会重新显示从通过缓存死了！
我找到了一个适合我的解决方案：
var usersTable = $(".tablesorter"); usersTable.trigger("update") .trigger("sorton", [usersTable.get(0).config.sortList]) .trigger("appendCache") .trigger("applyWidgets");
把它放在你编辑表格的地方之后。
在对这个问题进行一些修补之后，我得出结论，jQuery Tablesorter + jQuery TablesorterPager 的组合使用 产生了问题。 没有寻呼机删除行和做“和更新”就足够了。
当你还包括寻呼机时，这样做会变得更加困难（正如你正确注意到有一些缓存问题）。
但是你的问题的主要原因是jQuery Tablesorter不被认为用于你想要修改的表（在添加/删除行的意义上）。 当你另外使用TablesorterPager时，这更适用。 只需重读jQuery Tablesorter的描述
tablesorter是一个jQuery插件，用于将带有THEAD和TBODY标记的标准HTML表格转换为可排序的表格，而无需刷新页面。
TableSorter的清晰简洁的应用领域。 它甚至没有在页面上提及ajax，编辑，删除，追加，…..或类似术语。 它仅用于对静态表进行排序。
所以实际的解决方案是……开始寻找另一个jQuery“Table”插件，它是从一开始就构建的，可以修改表的意图/可能性。 并默认支持此function（删除，添加，….）
好吧，不过这里的解决方案是：
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来源）
如果问题仍然是如何/为什么/ ....评论
使用tablesorterpager和tablesorterfilter插件时，事情变得棘手 – 解决方案：
$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
仅适用于寻呼机，filter具有另一个缓存。 我已经找了近2个小时的解决方案，最后我写了这样的东西：
$("#deleteRowButton").click( function(){ // index of row which will be deleted var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index(); // table with tablesorter var table = document.getElementById( 'gridTable' ).config.cache.row; // deleting row $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove(); // truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ... delete( table[index] ); // tablesorter things $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets"); });
我正在删除rel属性与input＃removeThisID值相同的行。
现在是时候修改tablesorterfilter插件了。 在doFilter函数中，找到行：
// Walk through all of the table's rows and search. // Rows which match the string will be pushed into the resultRows array. var allRows = table.config.cache.row; var resultRows = [];
并用以下内容替换：
// Walk through all of the table's rows and search. // Rows which match the string will be pushed into the resultRows array. var allRows = table.config.cache.row; // refresh cache 'by hand' var newcache = new Array(); var i = 0; for( var a in allRows ) { newcache[i] = allRows[a]; i++; } allRows = newcache; var resultRows = [];
就这样…
问候forms波兰:)
这似乎是一个奇怪的方法，但实际上它对我有用。 表呈现精细和寻呼机正常工作。
$("#tabeBodyId").empty(); $("#tableId colgroup").remove(); //Update table(done using Ajax) $("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
抖动解决方案几乎为我工作，虽然更新缺少一行（见下面的代码）。 我已经扩展了代码以允许在表中插入新的TR。
我一直在玩，它在FFox下适合我，没有检查IExplorer。 无论如何有一个我无法解决的错误：如果你添加一个新的TR，然后你尝试删除它，它将不会从表中删除:(
// "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 tablesorter_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"); table.trigger("appendCache"); //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 tablesorter_add(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)); table.append(tr); //add row to cache too var c = table.get(0).config; c.totalRows = c.rowsCopy.length; c.totalPages = Math.ceil(c.totalRows / config.size); //now update table.trigger("update"); table.trigger("appendCache"); //simulate user switches page to get pager to update too index = c.page < c.totalPages-1; $(".next").trigger("click"); if(index) $(".prev").trigger("click"); //Set previous sorting method var sorting = c.sortList; if(sorting == '') sorting = [[0,0]]; table.trigger("sorton", [sorting]); }
你可以使用如下：
添加包含复杂HTML的新TR：
tablesorter_add(''+data.genus+' '+data.species+'
删除任何TR：
tablesorter_remove($("#"+orchid_id),$("#orchid_list"));
我简化的样本表：
Género Especie Amitostigma capitatum Amitostigma tetralobum
最好使用table.splice（index，1）; 比删除（table [index]）;! “删除”只是清空数组的元素，但不能完全删除。 对不起我的英语不好！ =）
请看看Motties tablesorter前叉。 他在使用tablesorter和pager插件时添加/删除行的示例。 http://mottie.github.com/tablesorter/docs/example-pager.html