帶有組合行的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 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

我知道這並沒有回答你關於替代tableorter的實際問題，但我認為你可能會發現更多的成功只需重新安排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

我有同樣的問題，雖然我還沒編碼，但我想如果我寫了一個小部件，在排序后，循環通過每個可見的行，得到行的伙伴，並將其移動到右邊放在桌子上，這可能會奏效。