jQuery tablesorter - AJAX 调用后功能丢失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/560664/
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
jQuery tablesorter - loss of functionality after AJAX call
提问by elwyn
I have recently been experimenting with the tablesorter plugin for jQuery. I have successfully got it up and running in once instance, and am very impressed. However, I have tried to apply the tablesorter to a different table, only to encounter some difficulties...
我最近一直在试验 jQuery 的 tablesorter 插件。我已经成功地启动并运行了一次，印象非常深刻。但是，我尝试将 tablesorter 应用于不同的表，却遇到了一些困难......
Basically the table causing a problem has a <ul>above it which acts as a set of tabs for the table. so if you click one of these tabs, an AJAX call is made and the table is repopulated with the rows relevant to the specific tab clicked. When the page initially loads (i.e. before a tab has been clicked) the tablesorter functionality works exactly as expected.
基本上，导致问题的表格在其<ul>上方有一个作为表格的一组选项卡。因此，如果您单击这些选项卡之一，则会进行 AJAX 调用，并使用与单击的特定选项卡相关的行重新填充表。当页面最初加载时（即在单击选项卡之前），tablesorter 功能完全按预期工作。
But when a tab is clicked and the table repopulated, the functionality disappears, rendering it without the sortable feature. Even if you go back to the original tab, after clicking another, the functionality does not return - the only way to do so is a physical refresh of the page in the browser.
但是，当单击选项卡并重新填充表格时，该功能将消失，从而使其没有可排序功能。即使您返回到原始选项卡，在单击另一个选项卡后，该功能也不会返回 - 唯一的方法是在浏览器中物理刷新页面。
I have seen a solution which seems similar to my problem on this site, and someone recommends using the jQuery plugin, livequery. I have tried this but to no avail :-(
我在这个网站上看到了一个与我的问题相似的解决方案，有人建议使用 jQuery 插件 livequery。我试过这个，但无济于事:-(
If someone has any suggestions I would be most appreciative. I can post code snippets if it would help (though I know the instantiation code for tablesorter is fine as it works on tables with no tabs - so it's definitely not that!)
如果有人有任何建议，我将不胜感激。如果有帮助，我可以发布代码片段（尽管我知道 tablesorter 的实例化代码很好，因为它适用于没有选项卡的表格 - 所以绝对不是那样！）
EDIT:As requested, here are some code snippets:
The table being sorted is <table id="#sortableTable#">..</table>, the instantiation code for tablesorter I am using is:
编辑：根据要求，这里有一些代码片段：
正在排序的表是<table id="#sortableTable#">..</table>，我正在使用的 tablesorter 的实例化代码是：
$(document).ready(function()
{
$("#sortableTable").tablesorter(
{
headers: //disable any headers not worthy of sorting!
{
0: { sorter: false },
5: { sorter: false }
},
sortMultiSortKey: 'ctrlKey',
debug:true,
widgets: ['zebra']
});
});
And I tried to rig up livequery as follows:
我尝试按如下方式装配 livequery：
$("#sortableTable").livequery(function(){
$(this).tablesorter();
});
This has not helped though... I am not sure whether I should use the id of the table with livequery as it is the click on the <ul>I should be responding to, which is of course not part of the table itself. I have tried a number of variations in the hope that one of them will help, but to no avail :-(
但这并没有帮助...我不确定我是否应该将表的 id 与 livequery 一起使用，因为它是<ul>我应该响应的点击，这当然不是表本身的一部分。我尝试了许多变体，希望其中一个会有所帮助，但无济于事:-(
回答by elwyn
Once you have appended your data, do this:
附加数据后，请执行以下操作：
$("your-table").trigger("update");
var sorting = [[0,0]];
$("your-table").trigger("sorton",[sorting]);
This will let the plugin know it has had an update, and re-sort it.
这会让插件知道它有更新，并重新排序。
The complete example given in the doc:
文档中给出的完整示例：
$(document).ready(function() {
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
});
return false;
});
});
From the tablesorter doc here: http://tablesorter.com/docs/example-ajax.html
从这里的 tablesorter 文档：http: //tablesorter.com/docs/example-ajax.html
回答by simplyharsh
Have you tried calling
你有没有试过打电话
$("#myTable").tablesorter();
after the code where you handle the click on tab and repopulate the table??? If not, just give it a try.
在处理单击选项卡并重新填充表格的代码之后？？？如果没有，请尝试一下。
回答by Vincent
It may be that as your second table is created with ajax that you need to rebind the events. You may want to use the LiveQuery plugin
可能是因为您的第二个表是使用 ajax 创建的，因此您需要重新绑定事件。您可能想要使用 LiveQuery 插件
http://docs.jquery.com/Plugins/livequery
http://docs.jquery.com/Plugins/livequery
which might "auto-magically" help with your problem.
这可能会“自动神奇地”帮助您解决问题。
edit: sorry, just reread your post and seen that you've tried that already.
编辑：对不起，刚刚重读你的帖子，看到你已经尝试过了。
Update.I've rigged up a quick test harness which hopefully will help. There are 3 LIs at the top each one has a different way of updating the table contents. The last one updates the contents and keeps the ordering
更新。我已经安装了一个快速测试工具，希望能有所帮助。顶部有 3 个 LI，每个 LI 都有不同的更新表格内容的方式。最后一个更新内容并保持排序
<script src="jquery-1.3.js" type="text/javascript" ></script>
<script src="jquery.livequery.js" type="text/javascript" ></script>
<script src="jquery.tablesorter.min.js" type="text/javascript" ></script>
<script>
var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th>
<th>Email</th><th>Due</th><th>Web Site</th></tr></thead>
<tbody><tr><td>Smith</td><td>John</td><td>[email protected]</td><td>.00</td>
<td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>[email protected]</td>
<td>.00</td><td>http://www.frank.com</td></tr></tbody>";
$(document).ready(function()
{
$("#addData").click(function(event){
$("#sortableTable").html(newTableContents);
});
$("#addLivequery").livequery("click", function(event){
$("#sortableTable").html(newTableContents);
});
$("#addLiveTable").livequery("click", function(event){
$("#sortableTable").html(newTableContents);
$("#sortableTable").tablesorter( { } );
});
$("#sortableTable").tablesorter( { } );
});
</script>
<ul>
<li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li>
<li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li>
<li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li>
</ul>
<hr />
<table id="sortableTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jones</td>
<td>Joe</td>
<td>[email protected]</td>
<td>0.00</td>
<td>http://www.jjones.com</td>
</tr>
<tr>
<td>French</td>
<td>Guy</td>
<td>[email protected]</td>
<td>.00</td>
<td>http://www.french.com</td>
</tr>
</tbody>
</table>
回答by Jonathan Rand
Use the ajaxStop function and the code will run after the ajax call is complete.
使用ajaxStop函数，代码会在ajax调用完成后运行。
$("#DivBeingUpdated").ajaxStop(function(){
$("table").tablesorter()
});
回答by Hayk Abrahamyan
after ajax call when changed your html content you need to update TableSorter.
在更改 html 内容后调用 ajax 后，您需要更新TableSorter。
TRY THIS FOR ME WORKING OK
试试这个对我来说工作正常
if you appending html
如果你附加 html
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
and when you add new html instead older
当你添加新的 html 而不是旧的
$("table").trigger("update");
$("table").trigger("sorton");
回答by Andriy Makukha
I've come across this problem recently. elwyn's solution didn't work for me. But this topicsuggested that the problem is in synchronization of functions on "update" and "sorton" events.
我最近遇到了这个问题。elwyn 的解决方案对我不起作用。但是这个话题表明问题在于“更新”和“排序”事件的功能同步。
If you look in the code of jQuery Tablesorter 2.0 (ver. 2.0.5b) source code, you'll see something like:
如果您查看 jQuery Tablesorter 2.0 (ver. 2.0.5b) 源代码的代码，您会看到如下内容：
$this.bind("update", function () {
var me = this;
setTimeout(function () {
// rebuild parsers.
me.config.parsers = buildParserCache(me, $headers);
// rebuild the cache map
cache = buildCache(me);
}, 1);
}).bind("sorton", function (e, list) {
$(this).trigger("sortStart");
config.sortList = list;
// update and store the sortlist
var sortList = config.sortList;
// update header count index
updateHeaderSortCount(this, sortList);
// set css for headers
setHeadersCss(this, $headers, sortList, sortCSS);
// sort the table and append it to the dom
appendToTable(this, multisort(this, sortList, cache));
});
So the problem is that setTimeoutmakes it less probable that update will be finished before sorting. My solution was to implement yet another event "updateSort", so that above code would become:
所以问题是这setTimeout使得更新在排序之前完成的可能性降低。我的解决方案是实现另一个事件“updateSort”，这样上面的代码就会变成：
var updateFunc = function (me) {
me.config.parsers = buildParserCache(me, $headers);
cache = buildCache(me);
};
var sortFunc = function (me, e, list) {
$(me).trigger("sortStart");
config.sortList = list;
var sortList = config.sortList;
updateHeaderSortCount(me, sortList);
setHeadersCss(me, $headers, sortList, sortCSS);
appendToTable(me, multisort(me, sortList, cache));
};
$this.bind("update", function () {
var me = this;
setTimeout(updateFunc(me), 1);
}).bind("sorton", function(e, list) {
var me = this;
sortFunc(me, e, list);
}).bind("updateSort", function (e, list) {
var me = this;
updateFunc(me);
sortFunc(me, e, list);
});
After updating data in your table you would have to trigger only this new event:
更新表中的数据后，您只需触发此新事件：
var sorting = [[0,0]];
$("#your-table").trigger("updateSort",[sorting]);
回答by Andriy Makukha
Turns out I had to make some modifications to the AJAX related code to re-call $("#myTable").tablesorter(..)after pulling any data...
原来我必须对 AJAX 相关代码进行一些修改才能$("#myTable").tablesorter(..)在提取任何数据后重新调用...
回答by RKitson
I was having the same problem except I was loading a table that had a row for every 'category' then inserting the data for every category into the table using asynchronous calls. Calling $("#myTable").tablesorter(..)after each record was returned caused my browser to bomb when more than a trivial number of records were loaded.
我遇到了同样的问题，只是我加载了一个表，每个“类别”都有一行，然后使用异步调用将每个类别的数据插入到表中。$("#myTable").tablesorter(..)在返回每条记录后调用会导致我的浏览器在加载的记录数量很少时爆炸。
My solution was to declare two variables, totalRecordsand fetchedRecords. In the $(document).ready()I set the totalRecordsto $("#recordRows").length;and every time I populate a record in the table, the fetchedRecordsvariable is incremented and if fetchedRecords >= totalRecordsthen I call $("#myTable").tableSorter(..).
我的解决方案是声明两个变量，totalRecords和fetchedRecords. 在$(document).ready()我设置totalRecords为$("#recordRows").length;并且每次我在表中填充记录时，fetchedRecords变量都会增加，如果fetchedRecords >= totalRecords然后我调用$("#myTable").tableSorter(..).
Works quite well for me. Of course, your mileage may vary.
对我来说效果很好。当然，您的里程可能会有所不同。
