Div使用Tablesorter奇怪地显示在顶部

时间:2011-05-09 06:47:33

标签: jquery jquery-plugins tablesorter

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

我真正的问题是我正在尝试使用寻呼机插件。寻呼机div显示在页面顶部。它可能会导致(两个问题)因为我第一次出现时将表放在先前隐藏的选项卡中。内容是通过AJAX从PHP文件加载的,加载后,根据数据,我可以激活标签和tablesorter(或不)。 如果我这样做,我会使用这行代码:

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

                            $("#calls").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#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")});
});

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

http://imgur.com/CJnYX

管理以解决此问题

管理解决它:

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

选项卡功能。

1 个答案:

答案 0 :(得分:2)

寻呼机插件可能需要知道表格的位置以及表格在正确定位之前的大小。当您的选项卡被隐藏时,其中的表格没有有用的位置,因此寻呼机可能最终为零所需的位置,结果是页面顶部的寻呼机。最简单的解决方案是在单击选项卡时绑定tablesorter

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

您只需绑定一次即可使用.one

  

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