Div 奇怪地显示在 Tablesorter 的顶部

Question

我正在使用http://tablesorter.com/docs/ 尝试对表格进行排序。它适用于不太令人不安的化妆品问题。在您真正尝试订购桌子之前，“斑马”不会激活。一点也不烦人，但我不知道为什么会这样。

我真正的问题是我也在尝试使用寻呼机插件。寻呼机 div 出现在页面顶部。这可能是由于我在第一次出现时将表格放在先前隐藏的选项卡中而引起的（这两个问题）。内容是通过 AJAX 从 PHP 文件加载的，加载时，根据数据，我可以激活选项卡和表格排序器（或不激活）。 如果我这样做，我会使用这行代码：

(".tab_content").hide();
                            $("ul.tabs li:first").addClass("active").show();
                            $(".tab_content:first").show();

                            $("#calls").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")}); 

“pager”div 位于选项卡内，就在目标表的下方。

正如@mu 所说的那样，寻呼机需要知道桌子在哪里。

标签加载了

<ul class="tabs">
    <li><a href="#cont-standard-report">Standard</a></li>
    <li><a href="#cont-extensions-report">Extensions</a></li>
    <li><a id="calls" href="#cont-calling-report">Callings</a></li>
</ul>

所以，我尝试了建议的函数，但在单击选项卡时它甚至没有调用它。

$("#cont-calling-report").one('click', function() {
    alert ("Test");
    $("#calls").tablesorter({widthFixed: true, widgets: ['zebra']})
               .tablesorterPager({container: $("#pager")});
});

这就是发生的事情。无需点击。

设法解决这个问题

设法用这个来解决它：

if (activeTab == '#cont-callings-report' && !tablesorter){
                                    $("#calls").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
                                    tablesorter = 1;
                                }

标签功能内部。

Answer 1

寻呼机插件可能需要知道表格在哪里以及表格有多大才能正确定位自己。当您的选项卡被隐藏时，其中的表格没有有用的位置，因此寻呼机可能以它需要的位置为零，结果是页面顶部的寻呼机。最简单的解决方案是在单击选项卡时绑定tablesorter：

$(selector_for_the_tab_with_the_table).one('click', function() {
    $("#calls")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")});
});

你只需要绑定一次，所以使用.one:

此方法与.bind() 相同，只是处理程序在第一次调用后未绑定。