wtyczka jquery tablesorter - zachowaj alternatywne kolory wierszy

Question

Wziąłem tabelę html, do której stosuję alternatywne kolory wierszy, a dodałem do niej sortownik tabeli jquery, aby użytkownicy mogli sortować tabelę.

Problem polega na tym, że alternatywne kolory wierszy są teraz pomieszane jako (na podstawie sortowania) istnieje wiele wierszy o tym samym kolorze tła.

Czy istnieje sposób na zresetowanie alternatywnego koloru wiersza przy użyciu sortownika tabel jquery?

Answer 1

Istnieje już domyślny widget zebra wbudowany w rdzeń, który stosuje klasy odd i even do alternatywnych wierszy. Działa niezależnie od tego, czy dodałeś class=even/odd do pliku html.

Jest bardzo łatwy w konfiguracji. Ja po prostu przestrzegać instrukcji na table sorter website, a następnie zmodyfikowany dokument gotowy do następujących funkcji:

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

zrobiłem przykład odpowiadając na pytanie. Możesz view the result in action lub see the example code.

Answer 2

Jak o:

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

Aha, i jeśli chcesz naprawdę proste poprawki, można wstrzymać oddech w tym CSS pseudo-klasy odebrano przez wszystkich głównych przeglądarek:

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

Ale moje przypuszczenie jest oparte na tym, jak FF i firma obsługują CSS dla dynamicznego HTML, to ustawiłoby twoje paski na przeładowanie, ale nie zastosowałoby CSS po sortowaniu. Ale chciałbym wiedzieć na pewno.

Answer 3

podstawie odpowiedzi Antoniego, ale rephrased jako jedną wkładką (przeważnie):

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

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

JQuery Połączenia mogą być „przykuty” jak powyżej, przy użyciu operacji jak filter() ograniczyć wybrane elementy, a .end() do "zresetuj" do ostatniego wyboru. Innymi słowy, każde ".end()" cofa "poprzedni .filter(). Ostateczna wersja .end() jest wyłączona, ponieważ nie ma już nic więcej do roboty.

Answer 4

Aby zachować paski zebry po przeprowadzeniu sortowania, należy ponownie uruchomić widget zebra.

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

Jest mniej hack, jak będzie ponowne logikę widget zebra zamiast replikowania go.

Uwaga: Ten rodzaj obejścia jest wymagany tylko w przypadku, gdy domyślny widget widgetu nie działa. W większości przypadków stwierdziłem, że ten hack nie jest wymagany, ponieważ widget działa poprawnie po sortowaniu.

Answer 5

poprawiona i najnowsze roztwór roboczy - wbudowana * Pozwoli to również na zmianę koloru na kliknięcia. *

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

Teraz wszystko powinno się wydać!

Answer 6

Via CSS:

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