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

Question

是否有任何现有的表格排序库，或者有没有办法配置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随其数据传输，不会单独分类。

Answer 1

有人开发板的为tablesorter使用这个功能。看看这个页面：

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

所有你需要做的是得到仲行一类“拓展孩子”的（这是可配置）。

确切地说你需要什么。

Answer 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(); 
});