plug-in jquery tablesorter - conserva i colori di riga alternativi

Question

Ho preso una tabella html che sto applicando colori di riga alternativi a, e ho aggiunto jquery table sorter su di esso in modo che gli utenti possano ordinare la tabella.

Il problema è che i colori di riga alternativi sono tutti incasinati ora (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 il separatore di tabelle jquery?

Answer 1

C'è già un widget predefinito zebra, incorporato nel core, che applica le classi odd e even a righe alternate. Funziona anche se non hai aggiunto class=even/odd al file html.

È davvero facile da configurare. Ho semplicemente seguito le istruzioni sulla table sorter website, e poi modificato la funzione pronta documento al seguente:

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

ho fatto un esempio, mentre rispondere alla domanda. È possibile view the result in action o see the example code.

Answer 2

ne dite:

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 si vuole davvero una soluzione semplice, si potrebbe tenere il respiro per questo CSS pseudo-classe essere prelevati da tutti i principali browser:

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

Ma la mia ipotesi è basata su come FF e azienda gestiscono CSS per HTML dinamico, imposterebbe il carico su strisce, ma non applicherà il CSS dopo averlo ordinato. Ma mi piacerebbe sapere per certo.

Answer 3

in base alla risposta di Anthony, ma riformulato come un one-liner (per lo più):

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

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

JQuery Le chiamate possono essere "incatenato" come sopra, utilizzando le operazioni come filter() per limitare gli elementi selezionati, e .end() a "resetta" all'ultima selezione. In altre parole, ogni .end() "annulla" il precedente .filter(). L'ultimo .end() viene lasciato fuori, poiché non c'è niente da fare dopo.

Answer 4

Per mantenere le strisce zebra dopo che è stato effettuato un ordinamento, è necessario attivare nuovamente il widget zebra.

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

questo è meno di un hack, come si sarà riutilizzando la logica del widget zebra piuttosto che replicarlo.

Nota: Questo tipo di soluzione è richiesto solo nei casi in cui il widget zebra predefinito non funziona. Ho trovato nella maggior parte dei casi che questo hack non è richiesto in quanto il widget funziona correttamente dopo l'ordinamento.

Answer 5

riveduta e più recente soluzione di lavoro - integrato * Questo consentirà inoltre il cambiamento di colore al click. *

<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 cacciare se stessa fuori!

Answer 6

Via vostro css:

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