Блог

Я использую http://tablesorter.com/docs / чтобы попытаться отсортировать таблицу. Это работает с косметической проблемой, которая не так сильно беспокоит. «Зебра» не активируется, пока вы действительно не попытаетесь упорядочить таблицу. Совсем не раздражает, но я не мог найти, почему это происходит.

Моя настоящая проблема в том, что я пытаюсь также использовать плагин pager. Div-файл пейджера отображается в верхней части страницы. Это может быть вызвано (обе проблемы) тем, что при первом появлении таблица находится внутри предыдущей скрытой вкладки. Содержимое загружается из PHP-файла через AJAX, и при загрузке, в зависимости от данных, я мог бы активировать вкладки и 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")});
});
  

Вот что происходит. Щелчок не требуется.

Удалось решить с помощью этого

Удалось решить это с помощью этого:

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

Внутри функции табуляции.

Вероятно, плагину pager необходимо знать, где находится таблица и насколько она велика, прежде чем он сможет правильно себя позиционировать. Когда ваша вкладка скрыта, таблица внутри нее не имеет полезной позиции, поэтому в пейджере, вероятно, в конечном итоге отображаются нули для нужной позиции, и результатом является пейджер в верхней части страницы. Самым простым решением было бы привязать tablesorter при нажатии на вкладку:

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

Вам нужно привязать его только один раз, поэтому используйте .one :

Этот метод идентичен .bind() , за исключением того, что обработчик не привязан после его первого вызова.