Getting jQuery tablesorter to work with hidden/grouped table rows

Question

I have the classical table with expandable and collapsible records that if expanded show several subrecords (as new records in the same parent table, not some child div/child table). I am also using tablesorter and absolutely love it.

The problem is that tablesorter isn't keeping expanded child records next to the parent records. It sorts them as if they were top level. So each time the table gets sorted by a column the child rows end up all over the place and not where I want them.

Does anyone know of a good extension to tablesorter or specific configuration that enables tablesorter to keep child rows grouped together with the parent row even after sorting? Or do I have to give up tablesorter in favor of some other API or start the ugly process of writing my own widget? Should I avoid the css-based approach of hiding individual rows of the table to represent collapse rows?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

I was able to overcome this by assigning child rel attributes to children and parent rel attributes to parents. Then I loop through the table at the beginning and hide all of the children and reappend them after the sorting is completed. I also use a toggling function to display the children. Here is my solution:

function lfDisplayProductInformation(id){

    if($(`[rel="child-${id}"]`).attr("hidden") === 'hidden'){
        $(`[rel="child-${id}"]`).removeAttr('hidden')
    }
    else if(!$(`[rel="child-${id}`).attr("hidden")){
        $(`[rel="child-${id}"]`).attr("hidden", true)
    }

}

$(".tablesort")
.tablesorter({
  theme: 'blue',
  showProcessing : true
})

// assign the sortStart event
.bind("sortStart",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            if(!childRow.attr("hidden")){
                childRow.attr("hidden", true)
            }
    });

})

.bind("sortEnd",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            childRow
            parentRow.after(childRow);
    });
})