我现在有一些代码隐藏了一行被删除的行，然后使用.remove（）函数将其删除。
但是我很难让它保持“删除”，因为每次刷新表格排序的寻呼机插件或我正在使用的过滤器插件插件时，删除的行会重新显示，因为它们当然是缓存的。
目前的代码很简单，目前正在更新小部件
$('.deleteMAP').live("click", function(){
$(this).closest('tr').css('fast', function() {
$(this).remove();
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("applyWidgets");
});
})
无论如何都要从分页器插件的缓存和tablesorter插件中删除“行”，这样当我“更新”表以反映已删除行的事实时，它们不会重新出现通过缓存从死里复活！
答案 0 :(得分：17)
我找到了一个对我有用的解决方案：
var usersTable = $(".tablesorter");
usersTable.trigger("update")
.trigger("sorton", [usersTable.get(0).config.sortList])
.trigger("appendCache")
.trigger("applyWidgets");
将它放在您编辑表格的地方之后。
答案 1 :(得分：5)
在对此问题进行一些修补之后，我从jQuery Tablesorter + jQuery TablesorterPager的组合使用中得出问题出现 。没有分页器删除行并执行和“更新”就足够了。
当你还包含寻呼机时，这样做会变得更加困难（正如你正确注意到有一些缓存问题）。
但是问题的主要原因是jQuery Tablesorter不被认为用于你想要修改的表（在添加/删除行的意义上）。当你另外使用TablesorterPager时，这更适用。只需重读jQuery Tablesorter的描述
tablesorter是一个jQuery插件 用一个标准的HTML表格 THEAD和TBODY标签成可排序的 没有页面刷新的表。
TableSorter的清晰简洁的应用领域。它甚至没有在页面上提及ajax，编辑，删除，追加，.....或类似术语。 仅用于对静态表进行排序。
所以实际的解决方案是......开始寻找另一个jQuery“Table”插件，它是从一开始就构建的，可以修改表的意图/可能性。并默认支持此功能（删除，添加，....）
尽管如此，这里是解决方案：
快速复制粘贴javascript源代码（基于TablesorterPager example的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）
如果问题仍然是关于如何/为什么/ ....评论
答案 2 :(得分：4)
使用tablesorterpager和tablesorterfilter插件时，事情变得棘手 - 解决方案：
$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
仅适用于寻呼机，过滤器具有另一个缓存。我已经找了近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 value相同的行。
现在是时候修改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 = [];
这就是......
表格波兰：）
答案 3 :(得分：3)
这似乎是一种奇怪的方法，但实际上它对我有用。表呈现精细和寻呼机正常工作。
$("#tabeBodyId").empty();
$("#tableId colgroup").remove();
//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
答案 4 :(得分：1)
抖动解决方案几乎为我工作，虽然更新缺少一条线（见下面的代码）。我已经扩展了代码以允许在表中插入新的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('<tr id="'+data.id+' " title="Haz click para editar" onclick="edit('+data.id+')"><td id="'+data.id+'_genus">'+data.genus+'</td><td id="'+data.id+'_species">'+data.species+'</td></tr>', $("#orchid_list"));
删除任何TR：
tablesorter_remove($("#"+orchid_id),$("#orchid_list"));
我简化的样本表：
<table id="orchid_list" class="tablesorter">
<thead>
<tr>
<th id="genus">Género</th>
<th id="species">Especie</th>
</tr>
</thead>
<tbody>
<tr id="2" title="Haz click para editar" onclick="edit('2')">
<td id="2_genus">Amitostigma</td>
<td id="2_species">capitatum</td>
</tr>
<tr id="4" title="Haz click para editar" onclick="edit('4')">
<td id="4_genus">Amitostigma</td>
<td id="4_species">tetralobum</td>
</tr>
</tbody>
</table>
答案 5 :(得分：1)
最好使用table.splice（index，1）;比删除（table [index]）;! “删除”只是清空数组的元素，但不能完全删除。对不起我的英语不好！ =）
答案 6 :(得分：1)
请看看Motties tablesorter fork。他在使用tablesorter和pager插件时添加/删除行的示例。 http://mottie.github.com/tablesorter/docs/example-pager.html