jqueryui Tabs with Tablesorter

Question

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

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