Grouping Rows with Client Side HTML Table Sorting

Question

Are there any existing table sorting libraries, or is there a way to configure tablesorter, to sort every two rows? Alternatly, is there a better way to semantially express my

Answer 1

Someone developed this functionality for tablesorter. Check out this page:

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

All you need to do is give secondary rows a class of "expand-child" (this is configurable).

Does exactly what you need.

Answer 2

The only element available for you to logically (not necessarily semantically) group the related rows together is <tbody>, as it's valid to have multiple <tbody> elements. However, that won't help you any in this case due to the way tablesorter is implemented.

I can see an undocumented config option in the tablesorter source code - appender - which allows you to specify a function which takes the table being sorted and a data structure containing the sorted rows to be appended to it to achieve the desired reordering, but I can't see any options which let you configure which rows it looks at when it's doing the sorting.

If that first part of the puzzle was there, you could use it to restrict rows considered for sorting to your real data rows and use the appender option to provide a function which appends each sorted row and its next row sibling.

Edit: Here's a quick and nasty implementation of the extra piece you'd need and a usage example:

Modification to the buildCache method, from line 195 onward to 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: []};

Usage which works for me with your sample table:

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