Grouping lines with the client side. HTML table sorting.

Question

Are there existing table sort libraries or is there a way to set up tablesorter to sort every two rows? Alternatively, there is a better way to semantically express my table so that standard row sorting works.

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 am looking for a way to sort a table so that the table is sorted by data rows , but the colspan moving row with its data is not sorted separately.

Answer 1

Someone developed this feature 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 have to do is provide the minor lines to the expand-child class (this is customizable).

Exactly what you need.

Answer 2

The only logical (not necessarily semantically) available for you to group related lines together is <tbody> , since it is valid to have multiple <tbody> elements. However, this will not help you in this case due to the implementation of tablesorter.

I see the undocumented configuration option in the tablesorter source code - appender - which allows you to specify a function that sorts the table, and a data structure containing sorted rows that must be added to it to achieve the desired reordering, but I do not see any parameters that allow you’ll be able to configure which lines it looks at when it is sorting.

If this first part of the puzzle was there, you can use it to limit the rows considered to be sorted by your actual data rows, and use the appender parameter to provide a function that adds each sorted row and its next row.

Edit: Here you can quickly and unpleasantly implement the additional fragment that you need, and an example of use:

Modification of the buildCache method, starting from line 195 onwards 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 that 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(); });