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/chil

Answer 1

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

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

Answer 4

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