jQuery Tablesorter error

Question

Just updated to the latest tablesorter and looks like its broken or something. Everytime i try to open my page, Firebug says:

table.config.parsers is undefined

And it just breaks all of my Javascript. If I revert the tablesorter version, it will work fine.

Javascript:

$("#List").tablesorter({ 
    widgets: ['zebra'],
    headers: { 
        4: { sorter: false }
    }
})

HTML:

<table id="List" class="tablesort ui-widget-content ui-corner-top">
    <thead>
      <tr class="ui-widget">
          <th>Pa&iacute;s</th>
          <th>ISO</th>
          <th>ISO3</th>
          <th>CODE</th>
          <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

Although the above answer doesn't mention it, I was able to replicate the error by first instantiating tablesorter() and then triggering a sort request.

This order of events would be necessary when appending or replacing existing table data with new data via AJAX or otherwise like so:

// populate our table body with rows
$("#myTable tbody").html(json.tbody);

// let the sorting plugin know that we made a update
$("#myTable").trigger("update");

// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];

// sort
$("#myTable").trigger("sorton",[sorting]);

The combination of the "update" and the "sorton" event seems to be triggering the error. By the time the "sorton" event is handled the DOM hasn't been assigned the table.config.parsers - thus the error.

The fix is to wrap the "sorton" event handling in a 1 millisecond timeout.

Replace the existing "sorton" bind in jquery.tablesorter.js (line ~803) with the following:

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

tablesorter() is really a handy plugin. Thanks to Christian for releasing it.