The main issue is that the content switcher code is replacing the contents using jQuery's html()
function. So you have two options:
1) Initialize the tablesorter plugin immediately after the html is added, and the content is visible (zebra striping won't apply on hidden content). This will require changing the plugin since no callbacks are provided; just modify this part of the script (demo):
function initTablesorter(target) {
console.log(target);
$(target).find('table').tablesorter({
sortList: [[0, 0]],
widgets: ["zebra", "columns"]
});
}
jcps.fader = function (speed, target, panel) {
jcps.show(target, panel);
if (panel == null) {
panel = '';
}
$('.switcher' + panel).click(function () {
var _contentId = '#' + $(this).attr('id') + '-content';
var _content = $(_contentId).html();
if (speed == 0) {
$(target).html(_content);
initTablesorter( target );
} else {
$(target).fadeToggle(speed, function () {
$(this).html(_content);
setTimeout(function(){
initTablesorter( target );
}, 10);
}).fadeToggle(speed);
}
});
};
2) Or, use a "content switcher" like jQuery UI tabs which doesn't replace the content of the tab, but instead changes the visibility. In this case, you will need to trigger an "applyWidgets" event on the table to force the zebra widget to update (demo)