How to have multiple jQuery TableSorter tables on a page

Question

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

Rory McCrossan · Accepted Answer · 2012-05-16 08:43:19Z

7

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

answered May 16, 2012 at 8:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Buttle Butkus Over a year ago

I knew it would be simple. Thanks!

mrcoulson Over a year ago

This is correct if you know the tables ahead of time. If one script is handling dynamically generated tables on several pages, I found it is helpful to surround each table in some kind of container and then use $(".table-sorting-instance").each(function () and $(this).find(".tablesorter-table"); to find the tables. Just sharing!

Kim Wilson Over a year ago

This does not work. I have 2 tables with separate ids and I did instantiate tablesorter separately as you show above but only the first table sorts.

Rory McCrossan Over a year ago

@KimWilson You would be best to start a new question about that. It's possible this no longer applies to newer versions of tablesorter

Arbaz Khan · Accepted Answer · 2017-03-13 12:29:50Z

0

How about selecting on class?

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

if need to sort on multiple tables..

edited Mar 13, 2017 at 12:29

answered Mar 13, 2017 at 12:11

Arbaz Khan

801 silver badge8 bronze badges

1 Comment

Sig Over a year ago

As far as I know (dealing with that right now), using a class, it sorts only the last table in the page.

blackgreen · Accepted Answer · 2024-04-24 09:54:34Z

0

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

 });

edited Apr 24, 2024 at 9:54

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

answered Dec 2, 2015 at 12:53

Liz Eipe C

2551 silver badge5 bronze badges

1 Comment

kleopatra Over a year ago

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.

Collectives™ on Stack Overflow

How to have multiple jQuery TableSorter tables on a page

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related