jquery tablesorter plugin not working for me (dynamic tables)

3
votes

I have a table that gets generated dynamically. When there is data in the table is sorts fine. However, when it runs into a table that doesn't have data in it the next time I try to load data I get the following error:

table.tBodies[0] is undefined [Break On This Error] totalCells = (tabl...Bodies[0].rows[0].cells.length) || 0,

What I'm doing is I have a bunch or tables listed on the left hand side of the screen. When I click on one I create a html table the contains the columns and then the data from that table. This issue only happens when I click on a table that only brings back the column names of the table (no data in table in database).

In my .ajax call that loads the table:

        $("#tableData").tablesorter(); 
        ($("#tableContents").html(result));
        $("#tableData").trigger("update"); 
        $("#tableData").tablesorter();

Any ideas why I might be getting this error?

3
jquerytablesorter

3 Answers

10
votes

You probably need to resort your table... from this example:

$("#tableContents").append(html); 
$("#tableData")
  .trigger("update")
  .trigger("sorton",[ [[2,1],[0,0]] ]);

If that doesn't work, then try the "appendCache" method

$("#tableContents").append(html); 
$("#tableData")
  .trigger("update")
  .trigger("appendCache")
  .trigger("sorton",[ [[2,1],[0,0]] ]);

I also spent some time trying to find all of the undocumented methods and options in TableSorter, check it out in my blog.

9
votes

You are propably not creating the tbody element. This is a requirement for tablesorter. It doesn't need to hold any data e.g.

<table><thead>...</thead><tbody></tbody></table>

2
votes

move:

$("#tableData").tablesorter();

to after you load the table with your data.

EDIT:

after thinking about this some more, you do want to have the tablesorter() call after you load your table, but check to make sure there are rows in your tbody before you try to sort it.

something like this:

if($("#tableData").find('tbody:first tr').length > 0){
     $("#tableData").tablesorter(); 
}