blocks|key|1167242|text|我找到了一个对我有效的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167243|var+usersTable+=+$(".tablesorter");
usersTable.trigger("update")
++.trigger("sorton",+[usersTable.get(0).config.sortList])
++.trigger("appendCache")
++.trigger("applyWidgets");|code-block|syntax|javascript|1167244|将它放在您编辑表格的位置之后。|1167245|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found a solution that worked for me:

<pre><code>var usersTable = $(".tablesorter");
usersTable.trigger("update")
 .trigger("sorton", [usersTable.get(0).config.sortList])
 .trigger("appendCache")
 .trigger("applyWidgets");
</code></pre>

Put this after the place where you've edited the table.

blocks|key|1382205|text|抖动解决方案对我来说几乎是有效的，尽管缺少一行需要更新(参见下面的代码)。我已经扩展了代码，允许在表中插入新的TR。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1382206|我一直在玩，它在FFox下对我有效，没有检查IExplorer。无论如何，有一个我还不能修复的bug+:如果您添加了一个新的TR，然后尝试删除它，它将不会从表中删除:(|1382207|//+"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+%7C%7C+from)+%2B+1+%7C%7C+this.length);
++++this.length+=+from+<+0+?+this.length+%2B+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%2Bpager
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]);
}|code-block|syntax|javascript|1382208|你可以使用如下代码：|1382209|添加包含复杂HTML的新TR：|1382210|tablesorter_add('<tr+id="'%2Bdata.id%2B'+"+title="Haz+click+para+editar"+onclick="edit('%2Bdata.id%2B')"><td+id="'%2Bdata.id%2B'_genus">'%2Bdata.genus%2B'</td><td+id="'%2Bdata.id%2B'_species">'%2Bdata.species%2B'</td></tr>',+$("#orchid_list"));|1382211|删除任何TR：|1382212|tablesorter_remove($("#"%2Borchid_id),$("#orchid_list"));|1382213|我的简化样表：|1382214|<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>|1382215|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

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.

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 :(

<pre><code>// "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 &lt; 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 &lt; 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 &lt; 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]);
}
</code></pre>

And you can use is as follows:

Add new TR with complex HTML in it:

<pre><code>tablesorter_add('&lt;tr id="'+data.id+' " title="Haz click para editar" onclick="edit('+data.id+')"&gt;&lt;td id="'+data.id+'_genus"&gt;'+data.genus+'&lt;/td&gt;&lt;td id="'+data.id+'_species"&gt;'+data.species+'&lt;/td&gt;&lt;/tr&gt;', $("#orchid_list"));
</code></pre>

Remove any TR:

<pre><code>tablesorter_remove($("#"+orchid_id),$("#orchid_list"));
</code></pre>

My simplified sample table:

<pre><code>&lt;table id="orchid_list" class="tablesorter"&gt;
&lt;thead&gt;
&lt;tr&gt;
 &lt;th id="genus"&gt;Género&lt;/th&gt;
 &lt;th id="species"&gt;Especie&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
 &lt;tr id="2" title="Haz click para editar" onclick="edit('2')"&gt;
 &lt;td id="2_genus"&gt;Amitostigma&lt;/td&gt;

 &lt;td id="2_species"&gt;capitatum&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr id="4" title="Haz click para editar" onclick="edit('4')"&gt;
 &lt;td id="4_genus"&gt;Amitostigma&lt;/td&gt;
 &lt;td id="4_species"&gt;tetralobum&lt;/td&gt;
 &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

blocks|key|1167388|text|当你同时使用tablesorterpager和tablesorterfilter插件时，事情会变得棘手：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167389|$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");|code-block|syntax|javascript|1167390|仅适用于分页程序，筛选器有另一个缓存。我已经寻找了将近2个小时的解决方案，最后我写了这样的东西：|1167391|$("#deleteRowButton").click(+function(){
++//+index+of+row+which+will+be+deleted
++var+index+=+$('#gridTable+tr[rel="'%2B$("#removeThisID").val()%2B'"]').index();
++//+table+with+tablesorter
++var+table+=+document.getElementById(+'gridTable'+).config.cache.row;
++//+deleting+row
++$('#gridTable+tr[rel="'%2B$("#removeThisID").val()%2B'"]').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");
});|1167392|我正在删除具有与input#removeThisID值相同的rel属性的行。|1167393|现在是时候修改tablesorterfilter插件了。在doFilter函数中，查找行：|1167394|//+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+=+[];|1167395|并将其替换为：|1167396|//+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%2B%2B;
}
allRows+=+newcache;
var+resultRows+=+[];|1167397|就这样..。|1167398|来自波兰的问候:)|1167399|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

Things goes tricky when you use both tablesorterpager and tablesorterfilter plugins - solution with:

<pre><code>$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
</code></pre>

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:

<pre><code>$("#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");
});
</code></pre>

I'm deleting row which has rel attribute the same as input#removeThisID value.

Now it's time to modify tablesorterfilter plugin. In doFilter function, find lines:

<pre><code>// 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 = [];
</code></pre>

and replace these with:

<pre><code>// 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 = [];
</code></pre>

that's all...

regards form Poland :)

blocks|key|1382342|text|最好使用table.splice(index，1)；胜过delete(+tableindex+);！"Delete“只做空的数组元素，而不是全部删除。我的英语很抱歉！=)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1382343|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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! =)

blocks|key|1167504|text|这似乎是一种奇怪的方法，但实际上它对我很有效。表格呈现正常，分页程序工作正常。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167505|$("#tabeBodyId").empty();
$("#tableId+colgroup").remove();

//Update+table(done+using+Ajax)
$("#tableId").tablesorter({widthFixed:+true}).tablesorterPager({container:+$("#pager")});+|code-block|syntax|javascript|1167506|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This seems an odd approach, but actually it worked for me. Table renders fine and pager works properly. 

<pre><code>$("#tabeBodyId").empty();
$("#tableId colgroup").remove();

//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")}); 
</code></pre>

blocks|key|1382467|text|请看一下Motties的餐桌叉子。他举例说明了在使用tablesorter和pager插件时添加/删除行。http://mottie.github.com/tablesorter/docs/example-pager.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1382468|entityMap|0|LINK|mutability|MUTABLE|url|http://mottie.github.com/tablesorter/docs/example-pager.html^0|1H|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Please have a look at Motties tablesorter fork. He made an example for adding/removing rows when using tablesorter and pager plugin.
<a href="http://mottie.github.com/tablesorter/docs/example-pager.html" rel="nofollow">http://mottie.github.com/tablesorter/docs/example-pager.html</a>

I have some code at the moment that hides a row that is deleted and then removes it using the .remove() function.

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

<pre><code>$('.deleteMAP').live("click", function(){
 $(this).closest('tr').css('fast', function() {
 $(this).remove();
 $(".tablesorter").trigger("update");
 $(".tablesorter").trigger("applyWidgets");
 });
})
</code></pre>

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!

Updating jQuery Tablesorter plugin after removing a row from DOM

jQuery

目前，我有一些代码可以隐藏已删除的行，然后使用.remove()函数将其删除。然而，我很难使它保持“删除”，因为每次我刷新我正在使用的表排序分页插件或筛选器插件插件。删除的行会重新出现，当然，它们是被缓存的。当前的代码只是简单的小部件更新$('.deleteMAP').live("click", function(){...

问从DOM中删除行后更新jQuery表排序插件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从DOM中删除行后更新jQuery表排序插件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从DOM中删除行后更新jQuery表排序插件
EN