在动态修改的表格上使用jQuery tableSorter

Question

我正在使用jQuery tableSorter插件。

不幸的是，被排序的表格是动态修改的。当我添加元素后进行排序时，该元素会消失，恢复到tableSorter创建时的状态。

是否有任何办法可以强制tableSorter重新扫描页面，以便这些新元素能够正确排序？

- Alex

Answer 1

我相信你可以使用类似以下代码来触发更新：

$(table).trigger("update")

- Josh

---

只是一条注释，我需要像这样使用代码：$("#table_id").trigger("update"); - Giovani

Answer 2

看起来你是正确的。

$(table).trigger("update");
$(table).trigger("appendCache");

这就是方法。

需要注意的是， tablesorter API 在某个时候发生了变化，因此这些东西也发生了改变，事件绑定也改变了。 我最大的问题是试图弄清楚为什么有些事情有效，而其他事情无效，原因是使用了错误版本的插件，尽管没有明显的区别。

- Alex

---

这应该是被接受的答案。没有 "appendCache" 部分，我只能按一个方向排序（第一次点击排序，第二次不起作用），就像 Josh 的答案一样。但有了它，一切都按预期工作。请注意，如果更新发生在创建 tablesorter 对象的代码块之外的另一个代码块中，则可以在那里重新创建它。假设您的 tablesorter 表格具有 id "ts"。执行 $("#ts").tablesorter().trigger("update"); 和 appendCache 同样如此。或者：$table = $("#ts").tablesorter(); $table.trigger("update"); $table.trigger("appendCache"); - Buttle Butkus

另一方面，我刚刚发现如果您只删除了一行，则此答案将无法正常工作。如果您删除了一行，我不确定您实际上需要做任何事情。 - Buttle Butkus

Answer 3

$(table).trigger("update"); 抛出错误。

    Uncaught TypeError: Cannot read property 'rows' of undefined 

所以，有一个 jQuery 函数 .ajaxStop()，其中调用了 tablesorter()。不要在.ready()中调用 tablesorter。

    jQuery(document).ajaxStop(function(){
      jQuery("#table_name").tablesorter();
    })

完成了工作

- Devaroop

Answer 4

对于像我这样的新手来说，如果遇到动态生成表格排序问题，这里有一个解决方案。之前给出的答案是正确的，但是你应该在哪里放置这个命令呢？

$('#tableId').tablesorter().trigger('update');

你需要在将数据添加到表格后立即放置它。 例如，在我的情况下：

var tableData = "<thead><tr><th>Name</th><th>Age</th></thead><tbody><tr><td>Izaki</td><td>24</td><tr><tr><td>Serizawa</td><td>25</td></tr>";
$('#tableId').html('tableData');
$('#tableId').tablesorter().trigger('update');

- Ishwar Rimal