Tablesorter plugin with Tabs UI - only sorting table in first tab

Tablesorter plugin with Tabs UI - only sorting table in first tab

Having trouble using the tablesorter plugin within the tabs UI in ajax mode.  Only the table in the first tab is sorting.  Tables from the other tabs do not.

 

Using Tabs in ajax mode, basically… 

  1. <div id="tabs">

         <ul>
                     
             <li><a href="p1.php"><span>Table 1</span></a></li>
                     
             <li><a href="p2.php"><span>Table 2</span></a></li>
                     
             <li><a href="p3.php"><span>Table 3</span></a></li>
                     
         </ul>
                     
    </div>



 
I am using the “load” callback function of the Tabs UI to reload the tablesorter plugin every time a new page is loaded like so:

  1. $('#tabs').tabs({
       load: function() {
       $("#ReportTable").tablesorter();
        }
    });



… where the ID of “ReportTable” is the table ID for the table in p1.php.

 

I have tried the following things to no avail:

1. Given the same ID to the tables in the different tabs.  Gave the table id’s in the pages p2.php and p3.php also “ReportTable”.  The thought is that when the callback load function runs after each tab load it will reload the table.  Since it has the same name, it should work.


2. Given different ID's to the tables in the different tabs.  Given the tables id’s in p2.php and p3.php as “ReportTable2” and “ReportTable3” and changed the load function as follows:

  1. $('#tabs').tabs({
       load: function() {
       $("#ReportTable").tablesorter();

      $("#ReportTable2").tablesorter();

      $("#ReportTable3").tablesorter();
        }
    });

3. Used the “show” callback function instead.

 

None of this works.  Always the same result.  The table in the first tab sorts and the rest do not.  Any suggestions?

Thanks,

 

Mike