JSort, le tri sélectif jusque dans vos pages

Dans cet article :
  1. Le code HTML
  2. Le javascript

tri

Dernièrement, j’ai eu à imaginer une page de résultats de recherche. Cette page, je ne la voyais pas sans option de tris, mais cela m’embêtais vraiment de ne pouvoir trier qu’en rechargeant la page. En cherchant tout naturellement vers JQuery je suis tombé, au milieu de tous les scripts et plugins plus compliqués les uns que les autres,  sur JSort.

Ce plugin est aussi simple que léger (1Ko, qui dit mieux?). Il s’utilise avec toutes sortes de listes : ul, div, table… Le plus propre restant les ul / li, regardons cela de plus près :

Le code HTML

Tout se joue sur des classes. En effet, vous avez bien vos ul / li, mais dans vos li vous devez avoir vos critères de tri. Par exemple, un prix et un titre. On a donc :

<ul id="mesproduits">
    <li>
        <p class="titre">Allez c'est parti</p>
        <p class="prix">20</p>
    </li>
    <li>
        <p class="titre">Zéro défaut</p>
        <p class="txt">10</p>
    </li>
</ul>

On comprends vite que via le tri par prix, on doit avoir « Zéro défaut » > « Allez c’est parti », et inversement avec le tri par titre. C’est partiellement vrai puisque JSort gère aussi l’ordre de tri (ascendant ou descendant).

Le javascript

Vous avez un bouton avec un identifiant « tripartitre », un autre avec un identifiant « triparprix ». Alors votre code javascript, pour un tri ascendant, doit ressembler à ça :

$("#tripartitre").click(function(){
    $("#mesproduits").jSort({
        sort_by: 'p.titre',
        item: 'li',
        order: 'asc'
    });
});
$("#triparprix").click(function(){
    $("#mesproduits").jSort({
        sort_by: 'p.titre',
        item: 'li',
        order: 'asc'
    });
});

Dans le cas d’un tri descendant, vous devriez plutôt avoir ça :

$("#tripartitre").click(function(){
    $("#mesproduits").jSort({
        sort_by: 'p.titre',
        item: 'li',
        order: 'desc'
    });
});
$("#triparprix").click(function(){
    $("#mesproduits").jSort({
        sort_by: 'p.titre',
        item: 'li',
        order: 'desc'
    });
});

 

Toutes les démonstration sur le site officiel de l’extension !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *