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.

Answer 2

Bit late but, it's because you have an empty/no <tr> element in the <tbody>, and it expects at least one <tr>.

Answer 3

I tried some of the answers above but they didn't help in every page we were using tablesorter. Primary reason I figured for error is that c=sortList[i][0] is undefined either because we have an empty TR or we don't same number of TD as that of TH.

I had 8 TH/TD in case I have table data and 8 TH & single TD in case I have nothing to show. I managed to check if I have no table data then don't call tablesorter to sort on specific columns which doesn't exist. This did the trick. Might help someone with similar scenario

if(tableData.length != 0){
  $("#myid").tablesorter( {sortList: [[2,0]]});
}

Answer 4

The problem seems to be that if the table is filled via JavaScript the tablesorter doesn't find the new content unless the browser has displayed the new content.

Firing the tablesorter inside a setTimeout() routine removed that error for me.

    function initPage() {
        fillMyTable();
        // Init table sorter, but give the browser a second to draw the new table
        setTimeout(function(){ $("#my_table").tablesorter(); }, 1000);
    }