Tablesorter not working when used inside Content Panel Switcher

Question

At first hey to everybody!

I started creating simple webpage with few jQuery codes in it. As I wanted to move on from simple php links, I have tried to use this: https://code.google.com/p/jquery-content-panel-switcher/ .

It's working quite nicely, but my problem is that I have some tables in other pages and I use TableSorter plugin for them. And well, as the title says, it is not working. Table itself is loaded, but zebra widget is not working, neither do the simple sorting.

This is an example, when it doesn't work:

<div id="switcher-panel"></div>
<div id="content1-content" class="switcher-content show">CONTENT 1</div>
<div id="content2-content" class="switcher-content">
    <table id="myTable2" class="tablesorter-blue">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>3</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</div>

Here JSFiddle link: http://jsfiddle.net/Y4aBm/

As you can see, first table outside Content Panel Switcher works properly, while the one inside it (click on Content 2) is pre-sorted by default, but neither zebra, nor sorting works.

I have tried to find something about it, and I have found something about jQuery Event Delegation, but I was unable to fix it with those informations.

My question is if is this possible to fix without editing tablesorter code.

Thanks for all the replies!

Answer 1

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)