具有组合行的 jQuery 表排序器

Question

抱歉这个标题，我不知道如何更好地描述它。

我有下表：

<tr class="row-vm">
    <td>...</td>
    <td>...</td>
    ...
</tr>
<tr class="row-details">
    <td colspan="8">
        <div class="vmdetail-left">
        ...
        </div>
        <div class="vmdetail-right">
        ...
        </div>
    </td>
</tr>

每隔一行包含第一行的详细数据。默认情况下，它是用 CSS 隐藏的，但我可以用 jQuery 将其滑动打开。

我想要实现的：类似于此 jQuery 插件的表排序： http://tablesorter .com/docs/

问题：插件应该将所有成对的行“粘合在一起”，并将它们移动在一起。应仅对第一行 (.row-vm) 的数据进行排序，而忽略第二行 (.row-details) 的内容。

有支持这个的 jQuery 插件吗？

Answer 1

我在另一篇文章中发现了这个用于 jQuery 表排序器的小提琴，对我来说效果非常好！

<tr class="row-vm">
    <td>John</td>           
</tr>
<tr class="row-details expand-child">
    <td colspan="6">
        Detail About John
    </td>
</tr>

Answer 2

Datatables.net 上提供的插件支持详细信息行，尽管我使用它们的方式是通过 ajax 打开详细信息行，而不是始终存在所有数据。但是，当您进行排序/重新排序时，详细信息仍保留在主要数据中。

Answer 3

现在正在 2018 年寻找这个答案，如果您使用 mottie 的 tablesorter 2.0，文档中有一个名为“tablesorter-childRow”的类。所以上面的例子是：

<tr class="row-vm">
    <td>John</td>           
</tr>
<tr class="row-details tablesorter-childRow">
    <td colspan="6">
        Detail About John
    </td>
</tr>

Answer 4

我知道这并不能回答您关于备用表排序器的实际问题，但我认为您可能会发现只需重新排列 HTML 并使用任何常规表排序器而不需要特殊要求即可获得更多成功。

也许您可以将可见行信息和“隐藏”数据放在同一行中，然后模拟它们位于不同行中的事实？

即：

<tr>
  <div class="row-vm">
    ... info goes here- this can be in the form of floated divs,
        a ul, another table, or whatever suits you best
  </div>
  <div class="row-details">
    ... this is hidden, but can be expanded
  </div>
</tr>

您使用的表格元素越少越好。

Answer 5

我有同样的问题，虽然我还没有编码，但我想如果我编写一个小部件，在排序后，循环遍历每个可见行，获取该行的伙伴，并将其移动到右侧放在桌子上，这可能会起作用。