jquery - jQuery tablesorter in two tables on the same template?

Question

I have two tables in a same template on which data is generated dynamically. Both the table can have data, none of them can have data or only one of them can have data. I want to sort the table with data even if there's no data on the other table, so that I used a if condition like this in jQuery:

$(document).ready(function() { 
    // call the tablesorter plugin 
    if ($("#product-table tbody td").length > 0){
    $("table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
    }
}); 

When I use this, I don't get any error in the console, but if one table is empty sorting doesn't work on another table. If both the table have data, sorting works.

Answer 1

You are checking length of the data for only one table. Try this way,

$(document).ready(function() { 
    // call the tablesorter plugin 
    if ($("#product-table tbody td").length > 0){
    $("#product-table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
    }
    if ($("#product-table2 tbody td").length > 0){
    $("#product-table2").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
    }
});