Sorting a table that's nested in another table (with Tablesorter)

Question

I have an existing table that uses the Tablesorter jQuery plugin for sorting, and that works great.

I've recently added functionality so that when you click to expand one of the rows of that table, it:

• adds a new row (with colspan set to span across all columns)
• loads new HTML into the newly-created row, which contains a table with a unique id and a separate call to use tablesorter for the table with that ID

Again, that all works great. However, while tablesorter works great on the overall parent table, it doesn't load at all on the inner table.

I suspect there might be a problem with my entire approach to this, since I've tried other table sorting plugins (like Stupid Table Plugin) and none of them work, either.

Am I doing something clearly wrong? Or do I need to dive into sharing details via jsFiddle?

Answer 1

The original version of tablesorter (v2.0.5), does not work well with nested tables - demo.

$(function() {
  $('table').tablesorter();
});

Check out my fork of tablesorter which better deals with nested tables and nested themes - demo.

$(function() {
  $('table').tablesorter({
    theme: 'blue'
  });
});