Question

起初嘿大家！

我开始创建简单的网页，其中包含很少的jQuery代码。由于我想从简单的PHP链接继续，我试图使用它：https://code.google.com/p/jquery-content-panel-switcher/。

它运行得很好，但我的问题是我在其他页面中有一些表，我使用TableSorter插件。好吧，正如标题所说，它不起作用。表本身已加载，但zebra小部件不起作用，也不进行简单排序。

这是一个例子，当它不起作用时：

<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>

这里JSFiddle链接：http://jsfiddle.net/Y4aBm/

正如您所看到的，Content Panel Switcher外部的第一个表正常工作，而其中的一个表（单击内容2）默认是预先排序的，但斑马和排序都不起作用。

我试图找到一些关于它的东西，我发现了一些关于jQuery事件委派的事情，但是我无法用这些信息修复它。

我的问题是，如果不编辑tableorter代码就可以修复。

感谢所有回复！

Answer 1

主要问题是内容切换器代码正在使用jQuery的html()函数替换内容。所以你有两个选择：

1）在添加html后立即初始化tablesorter插件，内容可见（斑马条纹不适用于隐藏内容）。这将需要更改插件，因为没有提供回调;只需修改脚本的这一部分（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）或者，使用“内容切换器”，例如jQuery UI选项卡，它不会替换选项卡的内容，而是会更改可见性。在这种情况下，您需要在表上触发“applyWidgets”事件以强制更新zebra小部件（demo）

在内容面板切换器中使用时，Tablesorter无法正常工作

1 个答案: