按多个 <tbody> 对 <table> 进行排序答案

【问题标题】：Sort <table> by multiple <tbody>'s按多个 <tbody> 对 <table> 进行排序
【发布时间】：2017-06-19 20:46:02
【问题描述】：

我需要按多个 <tbody> 的分组对我的 <table> 进行排序

这很简单，看起来像这样：

<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> 中的每个列表分组，并希望对每个<tbody> 中的两个<tr> 锁定在一起的表进行排序。

如果我按标题 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/)，但它似乎也不支持它。

我不知道如何排序，但我想我不可能是唯一一个想做这样的事情的人。也许我问错了问题？

任何有关如何执行此操作或使用哪个插件的帮助或建议都非常棒。

编辑：排序标准是 each 中的第一个。每个中的第二个需要与每个中的第一个锁定在一起，并且不可排序。所以第二个不应该是可排序的，而是应该与第一个锁定。

如果我还没有说清楚，请告诉我，我会再试一次。

【问题讨论】：

按什么标准排序？
应该按每个中第一个中的每一列进行排序。每个中的第二个应该只是与第一个“锁定”在一起（关联），并且只是跟随。 colspan 列不应该是可排序的。抱歉没有说清楚
您尝试的 tablesorter 的分支确实对每个单独的 tbody 中的内容进行了排序 - 文档中的 configuration table 证明了这一点。如果您想自己对 tbodies 进行排序，请使用 sortTbodies widget。

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

【讨论】：

感谢您的回答 - 我已编辑我的帖子以阐明标准。
这是一个在标题上使用 clcik 的更好的工作版本。 plnkr.co/edit/OxRG92A0RQrGeP0vTWs3?p=preview。还可以使用备用单元格对相等的文本或数字进行二次排序
你刚刚为我创建了这个吗？如果是这样，哇。我感谢您的努力，非常感谢。