Сортировщик таблицы 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

Искал этот ответ сейчас в 2018 году, и если вы используете tableorter 2.0 от mottie, в документации есть класс, называемый "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 3

Плагин, доступный на Datatables.net, поддерживает подробные строки, хотя при использовании их подробные строки открываются с помощью ajax, а не все данные всегда присутствуют. Но когда вы делаете сортировку / переупорядочивание, детали остаются с основными данными.

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

У меня та же проблема, и хотя я еще не закодировал ее, я думаю, что если я напишу виджет, который после сортировки циклически перебирает все видимые строки, получает партнера строки и перемещает его в нужное место в таблице, это может сработать.