具有组合行的 jQuery 表格排序器答案

【问题标题】：jQuery table sorter with combined rows具有组合行的 jQuery 表格排序器
【发布时间】：2011-03-01 03:34:14
【问题描述】：

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

我有下表：

<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插件吗？

【问题讨论】：

标签： jquery jquery-plugins datatable tablesorter

【解决方案1】：

我在另一篇帖子中为 jQuery 表格排序器 found this fiddle，对我来说工作得很好！

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

【讨论】：

为了清楚起见，expand-child 类有什么诀窍。
为什么这不在文档中令人难以置信。

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

你使用的表格元素越少越好..

【讨论】：

嗯。我也想过这样的事情，但是根据HTML规范，<tr>只能包含<td>和<th>。由于数据似乎是真正的表格格式，因此在这里使用<table> 是合理的。特点在于细节行。
没错。如果不是表格数据，我会选择 DIV。多 (8) 个浮动 DIV（不幸的是）无法解决这个问题。
我认为tablesorter插件将需要td。最重要的是，任何合并主细节的解决方案都需要至少编写一个自定义排序器。
是的，tablesorter 插件需要 td。自定义排序器的编写是没有问题的，但只要我不能合并两行，它就帮不了我。
我想我真的看不到任何其他方式 - 一方面您说您只能拥有 <tr><td /><td /><td /></tr>，但另一方面您希望将非线性数据存储在线性行..除非您将行数据存储在某种data-foo="bar" 中，然后在单击时在jQuery 中动态构建/插入行？您也可以在排序之前删除，如果需要在另一侧重新构建？

【解决方案5】：

我有同样的问题，虽然我还没有编写代码，但我在想，如果我编写一个小部件，在排序后循环遍历每个可见行，获取该行的伙伴，然后移动它到表格中的正确位置，这可能有效。

【讨论】：