Сортировать <table> по нескольким <tbody>

Question

Мне нужно отсортировать <table> по группам несколько <tbody>"s

Это довольно просто и выглядит так:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>

Я группирую каждый список в <tbody> и хочу отсортировать таблицу с двумя <tr>в каждом <tbody> заперты вместе

Если я сортирую по заголовку 1, чтобы получить <td>с синим виджетом сверху, мне нужно все <tbody> двигаться вверх, так это выглядит так:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>

Я использовал ListJS ( http://listjs.com/) для сортировки своих таблиц, но похоже, что он не поддерживает группировку tbody. Затем я проверил TableSorter ( https://mottie.github.io/tablesorter/), но, похоже, это тоже не поддерживает.

Я не знаю, как это отсортировать, но думаю, что не могу быть единственным, кто когда-либо хотел сделать что-то подобное. Может я задаю не тот вопрос?

Любая помощь или предложение о том, как это сделать, или какой плагин использовать, было бы действительно здорово.

РЕДАКТИРОВАТЬ: Критерии для сортировки является первым каждого в каждом. Вторые в каждом должны быть заперты вместе с первым в каждом и не сортироваться. Таким образом, второе никогда не должно быть сортируемым, но вместо этого должно быть зафиксировано с первым.

Дайте мне знать, если я все еще не проясняю себя, и я попробую еще раз.

Answer 1

Не очень понятно, каковы критерии сортировки. Предполагая, что это число во второй ячейке может сделать что-то вроде:

var $tBodies = $('tbody').sort(function(a, b){     
         var aVal = +($(a).find('tr:first td').eq(1).text().trim() || 0); 
         var bVal = +($(b).find('tr:first td').eq(1).text().trim() || 0);            
         return aVal - bVal;
    });
    
    $('table').append($tBodies);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>