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

Question

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

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

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

Answer 1

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

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

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

я сделал пример, отвечая на вопрос. Вы можете view the result in action, или see the example code.

Answer 2

Как насчет:

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 3

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

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 4

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

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

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

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

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