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

我found this fiddle在另一篇文章中为jQuery tablesorter工作，对我来说很漂亮！

<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年寻找这个答案，如果您使用的是motort的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时使用任何常规的tablesorter而不需要特殊要求就能找到更多的成功。

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

即：

<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

我有同样的问题，虽然我还没编码，但我想如果我写了一个小部件，在排序后，循环通过每个可见的行，得到行的伙伴，并移动它在桌子上的正确位置，这可能有效。

带有组合行的jQuery表分类器

5 个答案: