Getting jQuery tablesorter to work with hidden/grouped table rows

If you want to keep tablesorter, there is a mod which I have used for this purpose available here

After including it, you make your second (expandable child) row have the class "expand-child", and tablesorter will know to keep the row paired with its parent (preceding row).

Ugly fix instead of using the above involves specifying parentId css class and childId css class for parent and child rows, and then using a widget to re-adjust. Just in case anyone else runs across this problem. It is clearly not the best code at all, but it works for me!

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});

Actually, that mod of tablesorter mentioned by @AdamBellaire was added to tablesorter v2.0.5. I've documented how to use the ccsChildRow option on my blog.

Also, if you are interested, I have a fork of tablesorter on github which has a lot of enhancements and useful widgets :)