jquery tablesorter plugin - conserve les couleurs de ligne alternatives

J'ai pris un tableau html que j'ai fais une demande de remplacement de lignes de couleurs, et j'ai ajouté jquery table trieur sur elle de sorte que les utilisateurs peuvent trier le tableau.

Le problème est que l'alternative de lignes de couleurs sont tout foiré maintenant que (basé sur le tri) il y a plusieurs lignes avec la même couleur de fond.

Est-il un moyen de réinitialiser l'alternative de couleur des lignes avec jquery table trieur?

source d'informationauteur leora

  1. 48

    Il y a déjà un widget par défaut zebraintégré dans le noyau, qui applique les classes odd et even de lignes alternées. Il fonctionne si oui ou non vous avez ajouté class=even/odd du fichier html.

    C'est vraiment facile à mettre en place. J'ai simplement suivi les instructions sur l' tableau trieur de site webet ensuite modifié le document de la fonction, prête à la suivante:

    <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 actionou consultez l'exemple de code.

  2. 6

    Basé sur Anthony réponse, mais reformulé comme un one-liner (pour la plupart):

    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é" comme ci-dessus, à l'aide des opérations comme filter() de limiter les éléments sélectionnés, et .end() de "reset" de la dernière sélection. Mettre une autre manière, chaque .end() "annule" la précédente .filter(). La finale .end() est laissé de côté, car il n'y a rien à faire par la suite.

  3. 5

    Afin de maintenir les zébrures après un tri a eu lieu, vous devez déclencher le zèbre widget de nouveau.

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

    C'est moins d'un hack, vous serez en réutilisant la logique de l'zebra widget plutôt que de le reproduire.

    Remarque: Ce genre de travail n'est requis que dans les cas où le défaut zebra widget est un échec. J'ai trouvé dans la plupart des circonstances, que ce hack n'est pas nécessaire que le widget fonctionne correctement poste de tri.

  4. 1

    Comment sur:

    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 pouvez retenir votre respiration pendant cette CSS pseudo-classe pour obtenir ramassé par tous les principaux navigateurs:

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

    Mais ma conjecture est fondée sur la façon de FF et de l'entreprise gérer les CSS pour HTML dynamique, de créer des bandes onload, mais de ne pas appliquer le CSS après tri. Mais je voudrais savoir pour sûr.

  5. 1

    Révisé et Dernière solution de travail - intégré
    *Cela permettra également de permettre le changement de couleur sur cliquez sur.*

     <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 coup de pied lui-même !

  6. 0

    Par l'intermédiaire de votre css:

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