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

Ответ 1

В уже созданном по умолчанию виджет zebra, встроенный в ядро, который применяет классы odd и even для чередования строк. Он работает независимо от того, добавили ли вы class=even/odd в html файл.

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

Как насчет:

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 после сортировки. Но я хотел бы знать наверняка.

Ответ 5

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

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

Теперь все должно удариться!

Ответ 6

Через ваш css:

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