Trier les éléments du DOM avec TinySort pour jQuery

J'ai souvent développé des interfaces qui permettaient de transférer des items sélectionnés d'une liste à une autre. Chaque fois, le même problème se posait : les éléments apparaissaient à l'écran suivant l'ordre du transfert plutôt que dans l'ordre logique, par exemple selon un tri alphabétique. Et chaque fois, je devais coder une fonction de tri spécifique, faute d'avoir accès à une fonction générique configurable.

Hier soir, je me suis mis à chercher un plugin qui pouvait trier les éléments du DOM. J'ai fait l'essai du plugin jQuery TinySort (version 1.0.4) et dans le cas de mon interface, tout a fonctionné du premier coup (chaque fois que je sélectionnais une date dans un calendrier, la valeur de la date s'ajoutait à une liste que je réordonnais avec TinySort pour conserver l'ordre chronologique à l'écran). L'avantage principal de ce type de tri est de pouvoir manipuler les éléments du DOM sans avoir à rafraîchir la page.

Ensuite, j'ai constaté que ce plugin pouvait aussi s'avérer utile pour trier le contenu d'une table, par colonnes, sans refaire de requête SQL à la base de données ou d'appel AJAX (les données ne sont pas rafraîchies, seulement déplacées). J'ai créé ce petit exemple fonctionnel pour vous.

Prenez la table HTML suivante, statique ou générée dynamiquement :

<table id="myTableId">
   <thead>
   <tr id="tableHeader">
       <th><a id="headerId" href="javascript:;">ID</a></th>
       <th><a id="headerDate" href="javascript:;">Date</a></th>
       <th><a id="headerCity" href="javascript:;">Ville</a></th>
   </tr>
   </thead>
   <tbody>
   <tr>
       <td class="id">1</td>
       <td class="date">2010-11-30</td>
       <td class="city">Montréal</td>
   </tr>
   <tr>
       <td class="id">2</td>
       <td class="date">2010-11-17</td>
       <td class="city">Toronto</td>
   </tr>
   <tr>
       <td class="id">3</td>
       <td class="date">2011-12-25</td>
       <td class="city">Calgary</td>
   </tr>
   <tr>
       <td class="id">4</td>
       <td class="date">2010-10-05</td>
       <td class="city">Vancouver</td>
   </tr>
   <tr>
       <td class="id">5</td>
       <td class="date">2009-01-19</td>
       <td class="city">Ottawa</td>
   </tr>
   </tbody>
</table>

Incluez à votre page jQuery et le plugin TinySort :

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.tinysort.min.js"></script>

Et initialisez les liens en entête du tableau pour leur attacher un événement onClick qui permettra le tri ascendant (du plus petit au plus grand) selon la valeur qui se trouve dans la cellule portant le nom de la classe :

$j = jQuery.noConflict();

$j(document).ready(function(){
   $j('#tableHeader a').click(
       function(){
           var sortBy = '';
           switch($j(this).get(0).id){
               case 'headerId' : sortBy = '.id'; break;
               case 'headerDate' : sortBy = '.date'; break;
               case 'headerCity' : sortBy = '.city'; break;
           }
           $j('table#myTableId tr').tsort('td' + sortBy, { 'order': 'asc' } );
       }
   );
});

L'idée de mettre une classe à chaque cellule me plaît moins mais c'est ce qui permet le tri des éléments sans trop se casser la tête. Notez que vous pouvez trier par le contenu texte de l'élément, par texte de l'élément enfant et par la valeur d'un attribut d'une balise (par exemple, le "value" d'un input). D'autres exemples pertinents de tri se trouvent dans la documentation, dont une façon alternative de trier des tables.