jquery tablesorter plugin - alternative Zeilenfarben beibehalten

Question

Ich nahm eine html-Tabelle, die ich alternative Zeilenfarben anwenden, und ich fügte jquery Tabelle Sorter auf sie, so dass Benutzer die Tabelle sortieren können.

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

Gibt es eine Möglichkeit, die alternative Zeile Farbe mit Jquery Tabelle Sortierer zurücksetzen?

Answer 1

Es gibt bereits ein Standard-Widget zebra die in den Kern integriert ist und auf die die Klassen odd y even Zeilen zu wechseln. Dies funktioniert unabhängig davon, ob Sie Folgendes hinzugefügt haben oder nicht class=even/odd in die html-Datei.

Es ist wirklich einfach einzurichten. Ich habe einfach die Anweisungen auf dem Tischsortierer-Website und änderte dann die Funktion document ready wie folgt:

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

Ich habe bei der Beantwortung der Frage ein Beispiel angeführt. Sie können sehen Sie sich das Ergebnis in Aktion an , oder siehe den Beispielcode .

Answer 2

Basierend auf Anthonys Antwort, aber als Einzeiler umformuliert (größtenteils):

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

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

JQuery-Aufrufe können wie oben "verkettet" werden, indem Operationen wie filter() um die ausgewählten Elemente einzuschränken, und .end() um auf die letzte Auswahl "zurückzusetzen". Mit anderen Worten, jede .end() macht den vorherigen Vorgang "rückgängig". .filter() . Das Finale .end() wird ausgelassen, da es danach nichts mehr zu tun gibt.

Answer 3

Um die Zebrastreifen nach einem Sortiervorgang beizubehalten, müssen Sie das Zebra-Widget erneut auslösen.

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

Dies ist weniger ein Hack, da Sie die Logik des Zebra-Widgets wiederverwenden, anstatt sie zu replizieren.

Anmerkung: Diese Art der Umgehung ist nur in Fällen erforderlich, in denen das Standard-Zebra-Widget nicht funktioniert. Ich habe festgestellt, dass dieser Hack in den meisten Fällen nicht erforderlich ist, da das Widget nach der Sortierung korrekt funktioniert.

Answer 4

Wie wäre es damit:

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

Oh, und wenn Sie eine wirklich einfache Lösung wünschen, können Sie darauf warten, dass diese CSS-Pseudoklasse von allen wichtigen Browsern übernommen wird:

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

Aber meine Vermutung ist, basierend auf der Art und Weise, wie FF und Co. CSS für dynamisches HTML handhaben, dass sie Ihre Streifen beim Laden setzen, aber das CSS nicht nach dem Sortieren anwenden. Aber ich würde gerne sicher wissen.

Answer 5

Überarbeitete und aktuellste Arbeitslösung - inbuilt * Dies ermöglicht auch die Änderung der Farbe beim Anklicken. *

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

Jetzt sollte sich alles von selbst erledigen!