Tout trier avec jQUery
J’ai utilisé récemment une petite astuce pour le boulot. C’est vraiment tout bête et pas innovant pour 2 sous, mais je trouve que ça vaut le coup de s’y arrêter.
J’ai eu besoin de trier n’importe quel élément du DOM avec jQuery, qui propose des solutions de tri de tableau en natif, mais rien de préfabriqué pour trier par exemple des boutons.
Ca donne cela:
$j("ATRIER").sort(function(a,b){ return COMPARAISON ? 1 : -1; }).remove().appendTo("LISTE"); |
Ou SELECTEUR est le sélecteur des éléments à trier, LISTE le sélecteur du conteur des éléments triés, et COMPARAISON une comparaison des 2 élément qui donne soit vrai soit faux.
Voyons un exemple avec une liste de boutons que l’on veut trier en fonction de ce qui est écrit dedans, voici la source:
<div id="listedeboutons"> <button class="mesboutonsatrier">Paris</button> <button class="mesboutonsatrier">Lyon</button> <button class="mesboutonsatrier">Marseille</button> <button class="mesboutonsatrier">Bordeaux</button></div> <button id="testTriV">Cliquez ici pour trier les boutons </button> |
<script type="text/javascript"><!-- $j(document).ready(function(){ //click sur bouton testTriV $j("#testTriV").bind("click",function(){ $j(".mesboutonsatrier").sort(function(a,b){ return a.innerHTML > b.innerHTML ? 1 : -1; }).remove().appendTo("#listedeboutons"); }); }); // --></script> |
Et le résultat:
La même chose avec une liste dont voici la source:
<select id="desnombres" multiple="true" size="4"> <option value="10">Dix</option> <option value="5">Cinq</option> <option value="12">Douze</option> <option value="26">Vingt-six</option> <option value="4">Quatre</option> </select> <button id="testTriN">Cliquez ici pour trier les boutons </button> |
<script type="text/javascript" line="n"> $j(document).ready(function(){ //click sur bouton testTriN $j("#testTriN").bind("click",function(){ $j("#desnombres > option").sort(function(a,b){ return parseInt(a.value) > parseInt(b.value) ? 1 : -1; }).remove().appendTo("#desnombres"); }); }); </script> |
Et le résultat:
Et voilà, en extrapolant on pourrait même filtrer les données avec une 2eme fonction qui aurait un test différent et pas le appendTo.
Erwan
13 déc, 2010
Merci beaucoup pour ces quelques lignes de code d’une grande efficacité, ça allège le traitement côté serveur et apporte des fonctionnalités à l’interface utilisateur.
Loopingstar
25 nov, 2011
C’est vraiment une super astuce. Je suis en plein dans cette problématique et je ne voulais pas utiliser jQuery UI !… Merci beaucoup