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?

Contingent

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

Urissa

Thanks I had found that mod but did not see any documentation on what to do with it. You pretty much found the only resource on Google, same as me, that can do this, but clearly you understood it better than I did. I have written my own ugly fix. – Contingent

hi Adam, i just recently came across this post. I posted a new question that i was wondering if you could take a look at: #9241405 . The bottom line is that my AJAX appended rows aren't getting the attributes that make them collapsible. I'm wondering how to make sure tablesorter.js properly appends the DOM upon AJAX. thanks, -tim – Germinal

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

Snafu

As of v2.4, the class expand-child is changed to tablesorter-childRow. Heads up for the newer version users. – Diapause

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

Contingent

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

Niblick