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

回答1:

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

回答2:

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

 });

Please refer this.

http://www.pearlbells.co.uk/table-pagination/

回答3:

How about selecting on class?

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

if need to sort on multiple tables..

来源：https://stackoverflow.com/questions/10614904/how-to-have-multiple-jquery-tablesorter-tables-on-a-page

标签

jquery

tablesorter