плагин jquery tablesorter - сохраняет альтернативные цвета строк

Question

Я взял HTML-таблицу, к которой применяю альтернативные цвета строк, и добавил сортировщик таблиц jquery, чтобы пользователи могли сортировать таблицу.

Проблема заключается в том, что все альтернативные цвета строк теперь перепутаны, поскольку (на основе сортировки) существует несколько строк с одинаковым цветом фона.

Есть ли способ сбросить альтернативный цвет строки с помощью сортировщика таблицы jquery?

Answer 1

Уже есть встроенный в ядро ​​виджет по умолчанию zebra, который применяет классы odd и even к чередующимся строкам. Это работает независимо от того, добавили ли вы class=even/odd в HTML-файл.

Это действительно легко настроить. Я просто следовал инструкциям на веб-сайте сортировщика таблиц , а затем изменил функцию готовности документа к следующему:

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

Я привел пример, отвечая на вопрос. Вы можете просмотреть результат в действии или см. Пример кода .

Answer 2

Основано на ответе Энтони, но перефразировано в одну строку (в основном):

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

Вызовы JQuery могут быть «связаны», как указано выше, используя такие операции, как filter(), чтобы ограничить выбранные элементы, и .end(), чтобы «сбросить» до последнего выбора. Другими словами, каждый .end() «отменяет» предыдущий .filter(). Финал .end() пропущен, так как после этого ничего не поделаешь.

Answer 3

Чтобы сохранить полоски зебры после сортировки, вам нужно снова запустить виджет зебры.

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

Это не хак, так как вы будете повторно использовать логику виджета зебры, а не копировать ее.

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

Answer 4

Пересмотренное и новейшее рабочее решение - встроено * Это также позволит изменить цвет при клике. *

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

Теперь все должно выкинуть само собой!

Answer 5

Как насчет:

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

О, и если вы хотите действительно простое исправление, вы можете задержать дыхание, чтобы этот псевдокласс CSS был подхвачен всеми основными браузерами:

table tr:nth-child(n+1) {
    color: #ccc;
}

Но мое предположение основано на том, как FF и компания обрабатывают CSS для динамического HTML, это установит нагрузку на полосы, но не будет применять CSS после сортировки. Но я бы хотел знать наверняка.

Answer 6

Через ваш css:

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }