jqueryui Tabs with Tablesorter

问题

I'm using jquery ui tabs with the tablesorter 2.0 plugin to obtain sort abilities on a dynamically populated html table but the sort only happens on the first tab upon page load. The other tabs do not sort or obtain the zebra striping form the 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 are much appreciated.

回答1:

The zebra widget only applies to visible rows, so you'll need to trigger the applyWIdgets method. And I'm going to assume you are using jQuery UI 1.10.2 and jQuery 2.0, where you can use the activate callback (demo):

$("#tabs").tabs({
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        // make sure there is a table in the 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 the table is in the first tab, use this 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);
            }
        }
    }
});

来源：https://stackoverflow.com/questions/16677472/jqueryui-tabs-with-tablesorter

标签

jquery-ui

jquery

tablesorter