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

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.