Refresh table with Ajax using Tablesorter

Question

I have a table which is being refreshed using AJAX. I would like to apply the TableSorter to this table.

I'm a novice at jQuery. On successful return from AJAX, I was doing this:

   success: function(html)
        {
        jQuery("#animalsinexhibit").html(html);
            jQuery("#animalsinexhibit").tablesorter({
                   debug          : true,
                   widgets        : ['zebra', 'columns'],
                   usNumberFormat : false,
                   sortReset      : true,
                   sortRestart    : true
           });
        },

This works fine when the page initially displayed (i.e. the first time it returns from the AJAX call) but the second time the AJAX returns, I'm getting the following and no TableSort styling and header sort icons appear:

stopping initialization! No table, thead, tbody or tablesorter has already been initialized

I've also tried using the following without success:

var resort = true;
jQuery("#animalsinexhibit").trigger("update", [resort]);

What is the proper way to attach the TableSorter on AJAX data?

Thanks.

Answer 1

It looks like you are using my fork of tablesorter, if so, then try the following:

Initialize tablesorter in the document ready function (it's fine if it is an empty table)

jQuery("#animalsinexhibit").tablesorter({
    debug          : true,
    widgets        : ['zebra', 'columns'],
    usNumberFormat : false,
    sortReset      : true,
    sortRestart    : true
});

then within the ajax call, since you're replacing the entire table contents (including the thead content), use the updateAll method

success: function(html) {
    jQuery("#animalsinexhibit")
        .html(html)
        .trigger('updateAll', [resort]);
},