Buttle Butkus
Buttle Butkus

Reputation: 9486

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]] 
    });    
});

Upvotes: 5

Views: 9040

Answers (3)

Liz Eipe C
Liz Eipe C

Reputation: 255

Yes you can add multiple tables in one page. You can add each table in wrap as shown below and it is possible to add the pagination and sort functionality separately.

 $(document).ready(function() {
   $('.pearl-container').each(function(i) {
     $(this).children(".myTable")
       .tablesorter({
         widthFixed: true,
         widgets: ['zebra']
       })
       .tablesorterPager({
         container: $(this).children(".pager"),
         size: 5
       });
   });

 });

Upvotes: 0

Arbaz Khan
Arbaz Khan

Reputation: 80

How about selecting on class?

$(".tablesorter").tablesorter(); 

if need to sort on multiple tables..

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

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();

Upvotes: 7

Related Questions