jquery tablesorter plugin - conserve les couleurs de rangées alternatives

Question

J'ai pris une table html à laquelle j'applique des couleurs de rangées alternatives et j'ai ajouté le trieur jquery table dessus afin que les utilisateurs puissent trier la table.

Le problème est que les couleurs de ligne alternatives sont toutes gâchées maintenant car (en fonction du tri), il y a plusieurs lignes avec la même couleur d'arrière-plan.

Existe-t-il un moyen de réinitialiser la couleur de ligne alternative avec le trieur de table jQuery?

Answer 1

Il existe déjà un widget zebra par défaut, intégré au noyau, qui applique les classes impair et pair aux lignes alternées. Cela fonctionne que vous ayez ajouté ou non class = pair / impair au fichier html.

C'est vraiment facile à installer. J'ai simplement suivi les instructions du site Web du trieur de tables , puis modifié la fonction de préparation de document comme 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 afficher le résultat en action ou voir l'exemple de code .

Answer 2

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

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

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

Les appels JQuery peuvent être " chaînés " comme ci-dessus, utilisez des opérations comme filter () pour limiter les éléments sélectionnés et .end () pour "réinitialiser". à la dernière sélection. En d'autres termes, chaque .end () "annule". l'ancien .filter () . Le dernier .end () est laissé, car il n'y a rien à faire après cela.

Answer 3

Pour conserver les bandes de zèbre après un tri, vous devez réactiver le widget zèbre.

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

C’est moins un hack, car vous allez réutiliser la logique du widget zebra plutôt que de le répliquer.

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

Answer 4

Que diriez-vous de:

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 vraiment simple, vous pouvez retenir votre souffle pour que cette pseudo-classe CSS soit reprise par tous les principaux navigateurs:

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

Mais je suppose que la façon dont FF et la société gèrent le code CSS dynamique pour le code HTML permet de définir les bandes en charge, mais de ne pas appliquer le code CSS après le tri. Mais j'aimerais savoir à coup sûr.

Answer 5

Solution de travail révisée et récente - intégrée * Ceci activera également le changement de couleur au 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>

Maintenant, tout devrait se mettre à la porte!

Answer 6

via votre css:

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