TableSorter

Question

TableSorter 非常适合子行 - 您只需给子行 tr 一个 tablesorter-childRow class 和父行 tr 一个 tablesorter-hasChildRow class 和 table 排序器能够在忽略所有子行的同时对 table 进行排序...

但是，当使用 Jquery 快速创建新子项时，Tablesorter 不再忽略这些新创建的子项...

当尝试对新的 table 进行排序时（即在创建子项之后），新创建的子项被推到 table 的顶部，而 table 的其余部分是正常排序。

这个 JsFiddle 演示了这一点：https://jsfiddle.net/szzp0aq9/1/

是否可以让 TableSorter 忽略这些新生成的子行？

编辑

背景：我最初在每行下面都有空的隐藏子行，我会在需要时 show()...

但是，由于我的程序生成的 table 可能非常大，有时超过 5000 行，所有这些空的隐藏行都会增加文件大小......因此我试图看看我是否可以只在需要时创建这些行，并且仍然让 table 分拣员高兴...

（顺便说一下，我的程序生成的 html 文件只能在本地机器上查看，不能上传到互联网上）

Answer 1

将 class expand-child 添加到子行有效。

但是，您会发现它不适用于之后插入的行，除非您在 table 上触发更新事件：

$('table').trigger('update');

我不会这样做，因为大小问题与空行关系不大，但与 html.

上的所有内容有关

进行切换的最佳方法是隐藏 .hide() 并显示行。（甚至使用 jQuery 的 toggle，请参见下面的示例）。

如果你必须改变内容，直接改变它，但隐藏那里的行。我建议在用户点击查看时使用 ajax 获取内容。

看看这个替代解决方案：

Answer 2

添加新行时，tablesorter 内部缓存也需要更新。为此，您需要触发 "update" method (demo)

function childRow(source, target) {
    var childRowId = '#' + target;
    // ... code to add rows
    $('table').trigger('update');
}

TableSorter - 当创建新的子行时，它被排序器忽略