从 DOM 中删除一行后更新 jQuery Tablesorter 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1903788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating jQuery Tablesorter plugin after removing a row from DOM
提问by Richard Thompson
I have some code at the moment that hides a row that is deleted and then removes it using the .remove() function.
我现在有一些代码可以隐藏已删除的行，然后使用 .remove() 函数将其删除。
However I'm having difficulty is making it remain "deleted" as every time I refresh the table sorted pager plugin or the filter plugin addon I'm using.. the deleted rows re-appear as they are of course cached.
但是，我很难让它保持“已删除”状态，因为每次我刷新表排序的寻呼机插件或我正在使用的过滤器插件插件时......删除的行重新出现，因为它们当然被缓存了。
Current code just simple with widget update at the moment
目前的代码只是简单的小部件更新
$('.deleteMAP').live("click", function(){
$(this).closest('tr').css('fast', function() {
$(this).remove();
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("applyWidgets");
});
})
Is there anyway to remove the "row" from both the cache of the pager plugin and also the tablesorter plugin so that when I "update" the table to reflect the fact a row has been removed they don't re-appear back from the dead via the cache!
无论如何要从寻呼机插件的缓存和 tablesorter 插件中删除“行”，以便当我“更新”表以反映行已被删除的事实时，它们不会重新出现在通过缓存死了！
回答by jerone
I found a solution that worked for me:
我找到了一个对我有用的解决方案：
var usersTable = $(".tablesorter");
usersTable.trigger("update")
.trigger("sorton", [usersTable.get(0).config.sortList])
.trigger("appendCache")
.trigger("applyWidgets");
Put this after the place where you've edited the table.
把它放在你编辑表格的地方之后。
回答by jitter
After some tinkering around with this problem I conclude the problems arisefrom the combined useof jQuery Tablesorter + jQuery TablesorterPager. With out the pager removing the row and doing and "update" is enough.
在对这个问题进行了一些修补之后，我得出结论，问题是由jQuery Tablesorter + jQuery TablesorterPager的组合使用引起的。没有寻呼机删除行并执行“更新”就足够了。
When you also include the pager it gets much more difficult to do this right (as how you noticed correctly there are some caching issues).
当您还包含寻呼机时，要正确执行此操作会变得更加困难（正如您正确地注意到存在一些缓存问题）。
But the main reason for your problem is that jQuery Tablesorter isn't thought to be used for tables which you intent to modify (in the sense of adding/removing rows). And this applies even more when you additionally use TablesorterPager. Just reread the description of jQuery Tablesorter
但是您的问题的主要原因是 jQuery Tablesorter 不被认为用于您打算修改的表（在添加/删除行的意义上）。当您额外使用 TablesorterPager 时，这更适用。只需重新阅读 jQuery Tablesorter 的描述
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
tablesorter 是一个 jQuery 插件，用于将带有 THEAD 和 TBODY 标签的标准 HTML 表格转换为无需页面刷新的可排序表格。
A clear and concise field of application for TableSorter. It doesn't even mention ajax, edit, remove, append, ..... or similar terms on the page. It is only for sorting a static table.
TableSorter 的清晰简洁的应用领域。它甚至没有在页面上提及 ajax、编辑、删除、附加、..... 或类似的术语。它仅用于对静态表进行排序。
So the actual solution is.... start looking for another jQuery "Table" plugin which was built from the start with the intention/possibility that the table can be modified. And which supports this by default (removing, adding, ....)
所以实际的解决方案是......开始寻找另一个jQuery“表格”插件，它是从一开始就以可以修改表格的意图/可能性构建的。默认情况下支持这一点（删除，添加，......）
Ok nonetheless here is the solution for:
好的，尽管如此，这里是解决方案：
jQuery Tablesorter + TablesorterPager remove rows (TR)
jQuery Tablesorter + TablesorterPager 删除行 (TR)
Quick copy-paste of the javascript source-code (HTML based on TablesorterPager example)
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")} );
});
I made a testpage for you with my solution (click the red TD's == removing that row).
我用我的解决方案为您制作了一个测试页（单击红色 TD == 删除该行）。
http://jsbin.com/uburo(http://jsbin.com/uburo/editfor the source)
http://jsbin.com/uburo（源代码为http://jsbin.com/uburo/edit）
If question remain on how/why/.... Comment
如果问题仍然是关于如何/为什么/......评论
回答by foxiu
Things goes tricky when you use both tablesorterpager and tablesorterfilter plugins - solution with:
当您同时使用 tablesorterpager 和 tablesorterfilter 插件时，事情会变得棘手 - 解决方案：
$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
works only for pager, filter has another cache. I've looking for solution for almost 2 hours, at last i've written something like this:
仅适用于寻呼机，过滤器有另一个缓存。我找了将近 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");
});
I'm deleting row which has rel attribute the same as input#removeThisID value.
我正在删除 rel 属性与 input#removeThisID 值相同的行。
Now it's time to modify tablesorterfilter plugin. In doFilter function, find lines:
现在是时候修改 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 = [];
and replace these with:
并将它们替换为：
// 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 = [];
that's all...
就这样...
regards form Poland :)
来自波兰的问候:)
回答by Albertyto
This seems an odd approach, but actually it worked for me. Table renders fine and pager works properly.
这似乎是一种奇怪的方法，但实际上它对我有用。表格呈现良好，寻呼机工作正常。
$("#tabeBodyId").empty();
$("#tableId colgroup").remove();
//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
回答by Epstone
Please have a look at Motties tablesorter fork. He made an example for adding/removing rows when using tablesorter and pager plugin. http://mottie.github.com/tablesorter/docs/example-pager.html
请看看 Motties tablesorter fork。他做了一个在使用 tablesorter 和 pager 插件时添加/删除行的示例。 http://mottie.github.com/tablesorter/docs/example-pager.html
回答by sudo
Better to use table.splice(index, 1); than delete( table[index] );! "Delete" do just empty element of array, but not deleted completely. Sorry for my English! =)
最好使用 table.splice(index, 1); 比删除（表[索引]）；！“删除”只是做数组的空元素，但不会完全删除。对不起我的英语不好！=)
回答by Jaboto
Jitter solution was almost working for me although a line was missing for update (see code below). I've extended the code to allow insert new TR's in table.
抖动解决方案几乎对我有用，尽管缺少一行更新（见下面的代码）。我扩展了代码以允许在表中插入新的 TR。
I've been playing around and it works for me under FFox, didn't check on IExplorer. Anyway there's a bug I couldn't fix yet: If you add a new TR and then you try to delete it it won't be deleted from table :(
我一直在玩，它在 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]);
}
And you can use is as follows:
你可以使用如下：
Add new TR with complex HTML in it:
添加带有复杂 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"));
Remove any TR:
删除任何 TR：
tablesorter_remove($("#"+orchid_id),$("#orchid_list"));
My simplified sample table:
我的简化示例表：
<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>
