1

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)

Ismail Moghul
  • 2,864
  • 2
  • 22
  • 28

2 Answers2

2

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');
}
Mottie
  • 84,355
  • 30
  • 126
  • 241
0

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/

Mauricio Moraes
  • 7,255
  • 5
  • 39
  • 59
  • Thanks, I was initially using this but since I had a table with 5000 rows, the empty rows increased the file size by quite a bit... – Ismail Moghul Jun 04 '15 at 14:36
  • Are you sure that there is no way to make the table sorter work with rows that are inserted afterwards? – Ismail Moghul Jun 04 '15 at 14:37
  • I don't know a way to do it. Looking at the snippet you showed, it is a good refactoring to put the html code inside the html and avoid inserting content (html structure) with javascript like you did, unless it comes from an ajax call. For it will get too obstrusive. Can't you do the toggling like in the last example? Are any other restrictions? – Mauricio Moraes Jun 04 '15 at 14:41
  • That's my current implementation - you can click on any of the green/red boxes... – Ismail Moghul Jun 04 '15 at 14:43
  • So basically I am currently doing it like it is in the last snippet, but due to the fact it means that I have loads empty hidden rows, it increases the file size by quite a bit, which leads to other problems... – Ismail Moghul Jun 04 '15 at 14:46
  • @IsmailM But I see that the child rows are already hidden after the parent rows. Whats the problem with that? If I where to work with your code I would prefer this approach. The content can also be fetched from a server when you click on the boxes. The hidden rows dont add as much content as all the text and information you have inside your html as parameters (like the data-approach one). Fetch the content with ajax passing an ID and fill the child rows td's with the information and it will be much faster. – Mauricio Moraes Jun 04 '15 at 14:49
  • The problem is that with large files (i.e. more than 30k rows), I have another 30k hidden empty rows... This increases the file size to the extent that the [browser crashes](http://stackoverflow.com/questions/1076622/browser-limitation-with-maximum-page-length/12629931#12629931) – Ismail Moghul Jun 04 '15 at 14:57
  • @IsmailM. To finish my point. Those empty rows are nothing compared to the content you have inside the data-approach params, for instance, when thinking of loading time. I would remove all that info from the table and would show it on a dialog when the user clicks on the red/green boxes. There's no sense in sorting it along with the other rows. Also, with this dialog approach, the need for empty child rows would disappear. – Mauricio Moraes Jun 04 '15 at 14:59