Using jQuery tableSorter on dynamically modified table

Question

I am using the jQuery tableSorter plugin on a page.

Unfortunatley, the table that is being sorted is dynamically modified, and when I sort after adding an element, t

Answer 1

For those Newbies like me who are facing issue with sorting dynamic generated table, here is the solution. The answer previously given are correct, but where do you place this command?

$('#tableId').tablesorter().trigger('update');

You need to place it as soon as you've appended the data to the table. Ex in my case

var tableData = "<thead><tr><th>Name</th><th>Age</th></thead><tbody><tr><td>Izaki</td><td>24</td><tr><tr><td>Serizawa</td><td>25</td></tr>";
$('#tableId').html('tableData');
$('#tableId').tablesorter().trigger('update');

Answer 2

Seems you are correct.

$(table).trigger("update");
$(table).trigger("appendCache");

does the trick.

As a note, the tablesorter API changed at some point, so these things got changed, as well as the event binding. My biggest hangup was trying to figure out why some things worked and others did not, and it was due to having a wrong version of the plugin, despite there being no obvious distinction.

Answer 3

I believe you can trigger an update using something like:

$(table).trigger("update")

Answer 4

The $(table).trigger("update"); throws error

    Uncaught TypeError: Cannot read property 'rows' of undefined 

So, there is a jquery function .ajaxStop() where tablesorter() is called. Do not call tablesorter in .ready()

    jQuery(document).ajaxStop(function(){
      jQuery("#table_name").tablesorter();
    })

which did the job