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

Question

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

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

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

Answer 1

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

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

<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"); 
});

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

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

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

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

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

Answer 6

Через ваш CSS:

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