plugin jquery tablesorter - conserva colori di riga alternativi

Question

Ho preso una tabella html a cui sto applicando colori di riga alternativi e ho aggiunto lo smistatore di tabelle jquery in modo che gli utenti possano ordinare la tabella.

Il problema è che ora i colori delle righe alternative sono tutti incasinati poiché (in base all'ordinamento) ci sono più righe con lo stesso colore di sfondo.

Esiste un modo per ripristinare il colore di riga alternativo con lo smistatore di tabelle jquery?

Answer 1

Esiste già un widget predefinito zebra , integrato nel core, che applica le classi dispari e pari a righe alternate. Funziona indipendentemente dal fatto che tu abbia aggiunto o meno class = even / odd al file html.

È davvero facile da configurare. Ho semplicemente seguito le istruzioni sul sito Web di smistamento delle tabelle , quindi ho modificato la funzione Pronto documento in quanto segue:

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

Ho fatto un esempio mentre rispondevo alla domanda. Puoi visualizzare il risultato in azione o vedi il codice di esempio .

Answer 2

Basato sulla risposta di Anthony, ma riformulato come one-liner (principalmente):

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

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

Le chiamate JQuery possono essere " concatenate " come sopra, usando operazioni come filter () per limitare gli elementi selezionati e .end () per " reset " all'ultima selezione. In altre parole, ogni .end () " annulla " il precedente .filter () . L'ultimo .end () viene lasciato fuori, poiché dopo non c'è più nulla da fare.

Answer 3

Per mantenere le strisce zebrate dopo che è avvenuta una sorta di ordinamento, è necessario attivare nuovamente il widget zebra.

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

Questo è meno di un trucco, poiché riutilizzerai la logica del widget zebra anziché replicarlo.

Nota: questo tipo di soluzione è necessario solo nei casi in cui il widget zebra predefinito non funziona. Ho riscontrato nella maggior parte dei casi che questo trucco non è necessario poiché il widget funziona correttamente dopo l'ordinamento.

Answer 4

Che ne dici di:

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, e se vuoi una soluzione davvero semplice, potresti trattenere il respiro perché questa pseudo-classe CSS venga raccolta da tutti i principali browser:

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

Ma la mia ipotesi si basa sul modo in cui FF e la società gestiscono i CSS per HTML dinamico, imposteranno le tue strisce al caricamento, ma non applicheranno il CSS dopo l'ordinamento. Ma vorrei saperlo con certezza.

Answer 5

Soluzione funzionante rivista e più recente - integrata * Ciò consentirà anche il cambio di colore al clic. *

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

Ora tutto dovrebbe aprirsi da solo!

Answer 6

Tramite il tuo css:

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