Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have multiple jQuery TableSorter tables on a page

The plugin is working fine when I only have 1 table on a page.

But with two, I get an error:

Uncaught TypeError: Cannot set property 'count' of undefined

That's because of the sortList option set below. I have it set to sort on the 4th column, and the aux_table, displayed first, only has 3 columns. But it works and the main_table doesn't. How do I get them both to work, or just the second, more important main_table?

Both tables are class tablesorter and they have different ids (main_table and aux_table).

The first table on the page works, and the second doesn't. Here is the JS from my <head> tag:

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // sort on the 4th column (index 3) column, DESC (1). ASC is (0). 
        sortList: [[3,1]] 
    });    
});
like image 566
Buttle Butkus Avatar asked May 16 '12 08:05

Buttle Butkus


1 Answers

You need to change your code to instantiate the table sorter on each individual table, so that you can specify separate settings for each.

$("#table1").tablesorter({ 
   sortList: [[3,1]] 
}); 

$("#table2").tablesorter();
like image 75
Rory McCrossan Avatar answered Oct 02 '22 18:10

Rory McCrossan