TableSorter - when creating new child rows, it is ignored by the sorter

Question

TableSorter works very well with Child rows - You simply need to give the child tr a tablesorter-childRow class and the parent tr a tablesorter-hasChildRow class, and table sorter is able to sort the table while ignoring all child rows...

However, when creating new children on the fly using Jquery, Tablesorter no longer ignores these newly created children...

When trying to sort the new table (i.e. after creating children), the newly created children are pushed to the top of the table and the rest of the table is sorted as normal.

This demonstrated by this JsFiddle: https://jsfiddle.net/szzp0aq9/1/

Is it possible to get TableSorter to ignore these newly generated child rows?

EDIT

Background: I initially had empty hidden child rows under each row that I would show() when required...

However, as the table produced by my program can be quite large, sometimes with over 5000 rows, all these empty hidden rows increases the file size by quite a bit... Thus I was trying to see if I could create these rows only when required and still keep table sorter happy...

(btw, the html file produced by my program is only viewed on a local machine and not uploaded onto the internet)

Answer 1

When a new row is added, the tablesorter internal cache also needs to be updated. In order to do this, you'll need to trigger the "update" method (demo)

function childRow(source, target) {
    var childRowId = '#' + target;
    // ... code to add rows
    $('table').trigger('update');
}

Answer 2

Adding the class expand-child to the child rows works.

https://jsfiddle.net/szzp0aq9/2/

but, you'll see that it won't work for the rows that are inserted afterwards unless you trigger the update event on the table:

$('table').trigger('update');

I wouldn't do it this way because the size problem has not much to do with the empty rows, but with all the content you have on your html.

The best way to do the toggling is by hiding .hide() and showing the rows. (or even with jQuery's toggle, See the example below).

If you have to change the content, just change it directly, but keep the row there hidden. I would suggest getting the content with ajax as the user clicks to view it.

Take a look at this alternative solution:

https://jsfiddle.net/szzp0aq9/4/