jquery ui - jqueryui Tabs with Tablesorter -

i'm using jquery ui tabs tablesorter 2.0 plugin obtain sort abilities on dynamically populated html table sort happens on first tab upon page load. other tabs not sort or obtain zebra striping form tablesorter.

html:

<div id="tabs">    <ul>       <li><a href="ftp-type.aspx?type=ftponly">ftp only</a></li>       <li><a href="ftp-type.aspx?type=billing only">billing only</a></li>       <li><a href="ftp-type.aspx?type=variance">variance</a></li>       <li><a href="ftp-type.aspx?type=adjust">adj only</a></li>    </ul> </div>  

i've tried:

$('#tabs').tabs({       ajaxoptions: {cache: false},       load: function()        {           $("#reporttable").tablesorter();       } }); 

any suggestions appreciated.

the zebra widget applies visible rows, you'll need trigger applywidgets method. , i'm going assume using jquery ui 1.10.2 , jquery 2.0, can use activate callback (demo):

$("#tabs").tabs({     activate: function (event, ui) {         var $t = ui.newpanel.find('table');         // make sure there table in tab         if ($t.length) {             if ($t[0].config) {                 // update zebra widget                 $t.trigger('applywidgets');             } else {                 // initialize tablesorter                 $t.tablesorter({                     theme: 'blue',                     widgets: ["zebra"]                 });             }         }     } }); 

update: oops, if table in first tab, use code (demo):

var tablesorteroptions = {     theme: 'blue',     widgets: ["zebra"] };  $("#tabs").tabs({     create: function (event, ui) {         var $t = ui.panel.find('table');         if ($t.length) {             $t.tablesorter(tablesorteroptions);         }     },     activate: function (event, ui) {         var $t = ui.newpanel.find('table');         if ($t.length) {             if ($t[0].config) {                 $t.trigger('applywidgets');             } else {                 $t.tablesorter(tablesorteroptions);             }         }     } });