How to have multiple jQuery TableSorter tables on a page

Asked 16/5, 2012 at 8:41 Answered 13/3, 2017 at 12:11

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

Ludovick answered 16/5, 2012 at 8:41 Comment(0)

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

Decima answered 16/5, 2012 at 8:43 Comment(4)

I knew it would be simple. Thanks! – Ludovick 16/5, 2012 at 8:48

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! – Cholon 16/11, 2015 at 19:56

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. – Tantrum 4/11, 2016 at 4:21

@KimWilson You would be best to start a new question about that. It's possible this no longer applies to newer versions of tablesorter – Decima 4/11, 2016 at 9:49

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

 });

Aguish answered 2/12, 2015 at 12:53 Comment(1)

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. – Unclasp 2/12, 2015 at 12:56

How about selecting on class?

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

if need to sort on multiple tables..

Azelea answered 13/3, 2017 at 12:11 Comment(1)

As far as I know (dealing with that right now), using a class, it sorts only the last table in the page. – Regeneracy 23/8, 2019 at 12:21

Recommended topics

Hot tags