使用客户端 HTML 表格排序对行进行分组答案

【问题标题】：Grouping Rows with Client Side HTML Table Sorting使用客户端 HTML 表格排序对行进行分组
【发布时间】：2010-12-01 11:49:36
【问题描述】：

是否有任何现有的表格排序库，或者有没有办法配置tablesorter，每两行排序一次？或者，是否有更好的方法来语义表达我的表格，以便标准行排序可以工作。

我有一个看起来像这样的 html 表格

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some Data: 1</td>
            <td>Some More Data:1 </td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>

        <tr>
            <td>Some Data: 2</td>
            <td>Some More Data: 2</td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data 2 set that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>           

    </tbody>
</table>

我正在寻找一种对表格进行排序的方法，以便表格按数据行排序，但带有 colspan 的行随其数据一起移动，而不是单独排序。 p>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

有人为 tablesorter 开发了这个功能。看看这个页面：

http://blog.pengoworks.com/index.cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Rows

您需要做的就是给辅助行一个“expand-child”类（这是可配置的）。

完全满足您的需求。

【讨论】：

【解决方案2】：

唯一可用于逻辑（不一定是语义）将相关行组合在一起的元素是<tbody>，因为拥有多个<tbody> 元素是有效的。但是，由于 tablesorter 的实现方式，在这种情况下这对您没有任何帮助。

我可以在 tablesorter 源代码中看到一个未记录的配置选项 - appender - 它允许您指定一个函数，该函数将被排序的表和一个包含排序行的数据结构附加到它以实现所需的重新排序，但我看不到任何选项可让您配置它在进行排序时查看的行。

如果难题的第一部分在那里，您可以使用它将考虑排序的行限制为您的真实数据行，并使用appender 选项提供一个函数，该函数附加每个已排序的行及其下一行兄弟。

编辑：这是您需要的额外部分的快速而讨厌的实现和使用示例：

修改buildCache方法，从第195行开始到jquery.tablesorter.js：

var rowsToSort = table.config.rowsToSort ? table.config.rowsToSort(table) : table.tBodies[0].rows;
var totalRows = rowsToSort.length,
    totalCells = (rowsToSort[0] && rowsToSort[0].cells.length) || 0,
    parsers = table.config.parsers,
    cache = {row: [], normalized: []};

适用于我的示例表的用法：

$(document).ready(function() {
    $.tablesorter.defaults.debug = true;

    // Select every other row as sorting criteria
    $.tablesorter.defaults.rowsToSort = function(table)
    {
      var rows = [];
      var allRows = table.tBodies[0].rows;
      for (var i = 0, l = allRows.length; i < l; i += 2)
      {
        rows.push(allRows[i]);
      }
      return rows;
    };

    // Append each row and its next sibling row
    $.tablesorter.defaults.appender = function (table, rows)
    {
      for (var i = 0, l = rows.length; i < l; i++)
      {
        var row = rows[i][0];
        var buddyRow = $(row).next("tr").get(0);
        table.tBodies[0].appendChild(row);
        table.tBodies[0].appendChild(buddyRow);
      }
    };

    $("table").tablesorter();
});

【讨论】：