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

Question

TableSorter 非常适用于子行 - 您只需给子 tr 一个 tablesorter-childRow 类和父 tr 一个 tablesorter-hasChildRow 类，表格排序器能够在忽略所有的情况下对表格进行排序子行...

但是，当使用 Jquery 动态创建新子代时，Tablesorter 不再忽略这些新创建的子代...

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

这个 JsFiddle 证明了这一点：https://jsfiddle.net/szzp0aq9/1/

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

编辑

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

但是，由于我的程序生成的表可能非常大，有时超过 5000 行，所有这些空的隐藏行都会使文件大小增加很多......因此我试图看看我是否可以创建这些仅在需要时才行，并且仍然保持表格排序器满意...

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

Answer 1

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

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

Answer 2

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

https://jsfiddle.net/szzp0aq9/2/

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

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

我不会这样做，因为大小问题与空行无关，而是与您的 html 上的所有内容有关。

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

如果您必须更改内容，只需直接更改它，但要隐藏该行。我建议在用户点击查看内容时使用 ajax 获取内容。

看看这个替代解决方案：

https://jsfiddle.net/szzp0aq9/4/