jQuery tablesorter - loss of functionality after AJAX call

Question

I have recently been experimenting with the tablesorter plugin for jQuery. I have successfully got it up and running in once instance, and am very impressed. However, I have tri

Answer 1

after ajax call when changed your html content you need to update TableSorter.

TRY THIS FOR ME WORKING OK

if you appending html

$("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]);

and when you add new html instead older

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

Answer 2

Turns out I had to make some modifications to the AJAX related code to re-call $("#myTable").tablesorter(..) after pulling any data...

Answer 3

I've come across this problem recently. elwyn's solution didn't work for me. But this topic suggested that the problem is in synchronization of functions on "update" and "sorton" events.

If you look in the code of jQuery Tablesorter 2.0 (ver. 2.0.5b) source code, you'll see something like:

$this.bind("update", function () {
    var me = this;
    setTimeout(function () {
        // rebuild parsers.
        me.config.parsers = buildParserCache(me, $headers);
        // rebuild the cache map
        cache = buildCache(me);
    }, 1);
}).bind("sorton", function (e, list) {
    $(this).trigger("sortStart");
    config.sortList = list;
    // update and store the sortlist
    var sortList = config.sortList;
    // update header count index
    updateHeaderSortCount(this, sortList);
    // set css for headers
    setHeadersCss(this, $headers, sortList, sortCSS);
    // sort the table and append it to the dom
    appendToTable(this, multisort(this, sortList, cache));
});

So the problem is that setTimeout makes it less probable that update will be finished before sorting. My solution was to implement yet another event "updateSort", so that above code would become:

var updateFunc = function (me) {
    me.config.parsers = buildParserCache(me, $headers);
    cache = buildCache(me);
};
var sortFunc = function (me, e, list) {
    $(me).trigger("sortStart");
    config.sortList = list;
    var sortList = config.sortList;
    updateHeaderSortCount(me, sortList);
    setHeadersCss(me, $headers, sortList, sortCSS);
    appendToTable(me, multisort(me, sortList, cache));
};
$this.bind("update", function () {
    var me = this;
    setTimeout(updateFunc(me), 1);
}).bind("sorton", function(e, list) {
    var me = this;
    sortFunc(me, e, list);
}).bind("updateSort", function (e, list) {
    var me = this;
    updateFunc(me);
    sortFunc(me, e, list);
});

After updating data in your table you would have to trigger only this new event:

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);

Answer 4

Once you have appended your data, do this:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]);

This will let the plugin know it has had an update, and re-sort it.

The complete example given in the doc:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
         $.get("assets/ajax-content.html", function(html) { 
             // append the "ajax'd" data to the table body 
             $("table tbody").append(html); 
            // let the plugin know that we made a update 
            $("table").trigger("update"); 
            // set sorting column and direction, this will sort on the first and third column 
            var sorting = [[2,1],[0,0]]; 
            // sort on the first column 
            $("table").trigger("sorton",[sorting]); 
        }); 
        return false; 
    }); 
});

From the tablesorter doc here: http://tablesorter.com/docs/example-ajax.html

Answer 5

I was having the same problem except I was loading a table that had a row for every 'category' then inserting the data for every category into the table using asynchronous calls. Calling $("#myTable").tablesorter(..) after each record was returned caused my browser to bomb when more than a trivial number of records were loaded.

My solution was to declare two variables, totalRecords and fetchedRecords. In the $(document).ready() I set the totalRecords to $("#recordRows").length; and every time I populate a record in the table, the fetchedRecords variable is incremented and if fetchedRecords >= totalRecords then I call $("#myTable").tableSorter(..).

Works quite well for me. Of course, your mileage may vary.

Answer 6

Use the ajaxStop function and the code will run after the ajax call is complete.

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});