jquery tablesorter plugin - Behalten Sie alternative Zeilenfarben bei

Question

Ich nahm eine HTML-Tabelle, auf die ich alternative Zeilenfarben anwende, und fügte jquery table sorter hinzu, damit Benutzer die Tabelle sortieren können.

Das Problem ist, dass die alternativen Zeilenfarben jetzt alle durcheinander sind, da es (basierend auf der Sortierung) mehrere Zeilen mit der gleichen Hintergrundfarbe gibt.

Gibt es eine Möglichkeit, die alternative Zeilenfarbe mit jquery Table Sorter zurückzusetzen?

Answer 1

Es gibt bereits ein Standard-Widget zebra, das in den Kern eingebaut ist und die Klassen odd und even auf alternierende Zeilen anwendet. Es funktioniert, ob Sie class=even/odd zu der HTML-Datei hinzugefügt haben oder nicht.

Es ist wirklich einfach einzurichten. Ich folgte einfach den Anweisungen auf dem table sorter website und modifiziert dann das Dokument-Ready-Funktion auf die folgenden:

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

ich ein Beispiel gemacht, während die Frage zu beantworten. Sie können view the result in action oder see the example code.

Answer 2

Wie wäre:

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

Ach ja, und wenn Sie eine wirklich einfache Lösung wollen, können Sie Ihren Atem für diese CSS Pseudo-Klasse halten konnte von allen großen Browsern abgeholt werden:

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

Aber meine Vermutung basiert darauf, wie FF und Unternehmen CSS für dynamisches HTML behandeln, würde es Ihre Streifen Onload setzen, aber nicht das CSS nach dem Sortieren anwenden. Aber ich würde es gerne wissen.

Answer 3

Basierend auf Anthony Antwort, sondern als Einzeiler (meist) neu formuliert:

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

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

JQuery Anrufe wie oben „verkettet“ werden können, um die ausgewählten Elemente zu begrenzen Operationen wie filter() verwenden und .end() zu "Zurücksetzen" auf die letzte Auswahl. Anders gesagt, jede .end() "macht" die vorherige .filter() rückgängig. Das letzte .end() bleibt stehen, da danach nichts mehr zu tun ist.

Answer 4

Um die Zebrastreifen zu erhalten, nachdem eine Sortierung stattgefunden hat, müssen Sie das Zebra-Widget erneut auslösen.

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

Dies ist weniger ein Hack, wie Sie die Logik der Zebra-Widget Wiederverwendung werden, anstatt sie zu replizieren.

Hinweis: Diese Art der Problemumgehung ist nur in Fällen erforderlich, in denen das standardmäßige Zebra-Widget fehlschlägt. Ich habe in den meisten Fällen festgestellt, dass dieser Hack nicht erforderlich ist, da das Widget nach dem Sortieren korrekt funktioniert.

Answer 5

Überarbeitete und Neueste Arbeitslösung - eingebaute * Dies wird auch die Änderung der Farbe auf Klick aktivieren. *

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

Nun sollte alles selbst kick out!

Answer 6

Via CSS:

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