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 table such that standard row sorting will work.

I have an html table that looks something like this

<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>

I'm looking for a way to sort the table such that the table is sorted by the data rows, but the row with the colspan travels with its data and is not sorted separately.

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 table such that standard row sorting will work.

I have an html table that looks something like this

<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>

I'm looking for a way to sort the table such that the table is sorted by the data rows, but the row with the colspan travels with its data and is not sorted separately.

• javascript
• jquery
• html

2 Answers 2

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

http://blog.pengoworks./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.

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