Question

I am using the tablesorter plugin: http://tablesorter.com/docs/ with jquery 1.4.2

Now my problem is this. The user can dynamically add rows to the table. But this seems to mess up the paging. Like first it gets added to the first “page” of rows but if you would go to the second page and you go back to the first page. You newly record is gone. I don’t know where it goes but it is just gone.

I tried to do this

$('#pagerid').unbind('click');
 $('#tbl tbody ').append(response.HtmlRow);
 $('#tbl').trigger('update');

So I tried to unbind the pager click method and do a trigger update but that does not seem to work. I then tried to add this line after the above 3 lines.

$('#tbl').tablesorterPager({ container: $('#pagerid') }); 

but it seems to do nothing too.

http://tablesorter.com/docs/example-pager.html

Answer 1

This is because TableSorterPager stores a cached array of the table rows and then destroys/recreates the table only showing the “interesting” rows from the cache – depending on the page selected.

I ran into this issue before at work, except I also had the TableSorterFilter plugin on top of Pager and TableSorter. I ended up getting it to work, finally, but it took a lot of effort modifying the plugin code.

If I were to start over, I would have just went with DataTables.net which seems to have a richer API for doing these types of things. In fact, I’d suggest going this route before you make yourself insane!