jquery tablesorter plugin - conserver les couleurs de ligne alternatives

Question

J'ai pris une table html à laquelle j'applique des couleurs de ligne alternatives, et j'ai ajouté jquery table trier dessus pour que les utilisateurs puissent trier la table.

Le problème est que toutes les couleurs de ligne alternatives sont toutes en désordre maintenant (en fonction du tri) il y a plusieurs lignes avec la même couleur de fond.

Y a-t-il un moyen de réinitialiser la couleur de ligne alternative avec jquery table trier?

Answer 1

Il existe déjà un widget par défaut zebra, intégré au cœur, qui applique les classes odd et even pour alterner les lignes. Cela fonctionne si oui ou non vous avez ajouté class=even/odd au fichier html.

C'est vraiment facile à configurer. J'ai simplement suivi les instructions du table sorter website, puis modifié le document fonction prêt à ce qui suit:

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

J'ai fait un exemple en répondant à la question. Vous pouvez view the result in action ou see the example code.

Answer 2

Que diriez-vous:

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, et si vous voulez une solution très simple, vous pourriez retenir votre souffle pour cette CSS pseudo-classe pour obtenir repris par tous les principaux navigateurs:

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

Mais je pense que c'est basé sur la façon dont FF et la compagnie traitent CSS pour le HTML dynamique, cela définirait votre stripes onload, mais n'appliquerait pas le CSS après le tri. Mais j'aimerais savoir à coup sûr.

Answer 3

Sur la base de la réponse d'Anthony, mais reformulée comme une doublure (la plupart du temps):

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

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

JQuery Les appels peuvent être « enchaînée » comme ci-dessus, en utilisant des opérations comme filter() pour limiter les éléments sélectionnés et .end() à "reset" à la dernière sélection. Autrement dit, chaque .end() "annule" le précédent .filter(). Le dernier .end() est arrêté, car il n'y a rien à faire par la suite.

Answer 4

Afin de conserver les bandes de zébrures après le tri, vous devez de nouveau déclencher le widget zebra.

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

C'est moins d'un hack, que vous serez réutilisez la logique du widget de zèbre plutôt que le reproduire.

Remarque: Ce type de contournement est requis uniquement dans les cas où le widget zebra par défaut est défaillant. J'ai trouvé dans la plupart des circonstances que ce bidouillage n'est pas requis car le widget fonctionne correctement après le tri.

Answer 5

révisée et dernière solution de travail - intégré * Cela permettra également le changement de couleur en cliquant dessus.Maintenant *

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

tout devrait se lancer sur!

Answer 6

Via votre code CSS:

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