Trier un tableau avec Stupid jQuery Table Sort
Elliott Chiaradia |02-05-2016
En étant mandaté pour créer un back-office contenant des tableaux plutôt conséquents (quelques centaines d'entrées), je me suis dit que pouvoir trier ces tableaux dynamiquement par colonnes ne pouvait que permettre aux utilisateurs de s'y retrouver plus aisément. L'idée de coder cette fonction a donc germé rapidement, mais celle-ci s'est rapidement dissipée au vu des solutions existantes (et performantes) qui pullulent sur internet. Après en avoir testé deux trois, je vais vous présenter succinctement "Stupid jQuery Table Sort", un plugin pouvant être implémenté en quelques petites minutes et qui fonctionne plutôt bien.
Stupid jQuery Table Sort permet de trier un tableau de données par colonne. Ce tri peut se faire de façon ascendant ou descendant par ordre numérique ou alphabétique suivant le type de données.
Un peu de pratique
Ce petit cas pratique va vous présenter un exemple d'implémentation de Supid jQuery Table Sort, dans celui-ci, l'utilisateur pourra trier le tableau (par colonne) en cliquant sur les intitulées de ses colonnes.
Tout d'abord, vous devez télécharger stupidtable.min.js, disponible ici. Après avoir décompressé le fichier downloadé, vous pouvez ne garder que stupidtable.min.js et supprimer tous les autres fichiers (les fichiers d'exemples, etc.).
Voici le code :
<table id="table-a-trier">
<thead>
<tr>
<th data-sort="int">NPA</th>
<th data-sort="string">Lieu</th>
</tr>
</thead>
<tbody>
<tr>
<td>1830</td>
<td>Lausanne</td>
</tr>
<tr>
<td>1831</td>
<td>Yverdon</td>
</tr>
<tr>
<td>1840</td>
<td>Martigny</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="VotreChemin/stupidtable.min.js"></script>
<script>
$(document).ready(function($) {
$("#table-a-trier").stupidtable();
});
</script>
Décortiquons rapidement ce bout de code.
Votre tableau doit contenir un ID ("table-a-trier" dans l'exemple).
<table id="table-a-trier">
Dans le <thead>, nous allons définir le type de données que la colonne va contenir. Ici, les NPA sont des int alors que les lieux seront défini par des chaines de caractères.
<th data-sort="int">NPA</th>
<th data-sort="string">Lieu</th>
Après la création de notre tableau, nous devons définir les appels aux librairies (d'abord jQuery, puis Stupid Table Sort).
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="VotreChemin/stupidtable.min.js"></script>
En dessous des appels des librairies, rajoutons un petit script qui appelle la fonction stupidtable() sur notre tableau que nous récupérons grâce à son ID ("table-a-trier").
<script>
$(document).ready(function($) {
$("#table-a-trier").stupidtable();
});
</script>
Et voici, vous avez un tableau pouvant être trié dynamiquement en jQuery.
Ajouter Font Awesome
Afin d'indiquer à l'utilisateur qu'il peut cliquer sur l'intitulé d'une colonne pour la trier, nous allons rajouter une petite icône issue de la librairie Font Awesome. L'icône fa-sort fait très bien l'affaire.
Dans le head de votre page HTML, rajoutez-y la ligne suivant, qui permet de charger Font Awesome depuis un CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
Si vous préférez ne pas utiliser de CDN et télécharger la librairie d'icônes, je vous invite à le faire en cliquant ici. Après avoir décompressé le fichier téléchargé, rajoutez-y la ligne suivante en remplaçant "VotreChemin" par le l'emplacement du fichier font-awesome.min.css
<link rel="stylesheet" href="VotreChemin/font-awesome.min.css">
Dans le thead, il ne vous reste plus qu'à ajouter les icônes grâce aux balises <i>.
<th data-sort="int">NPA <i class="fa fa-sort"></i></th>
<th data-sort="string">Lieu <i class="fa fa-sort"></i></th>
Trier par date
Le plugin ne permettant que de trier par int, float ou par string, il est tout de même possible d'avoir un triage par date. Pour ce faire, il suffit d'indiquer dans la cellule contenant la date, la valeur de data-sort-value, celle-ci devra contenir la date affichée, mais en Timestamp. (Comment obtenir un timestamp en PHP ? Rien de bien sorcier, je vous invite à lire la documentation PHP du sujet concerné).
<td data-sort-value="672537600">25 avril 1991</td>
Maintenant que vos cellules contiennent une valeur de data-sort-value, vous devez définir le type de données de la colonne, puisque les timestamps sont des nombres, optez pour les int.
<th data-sort="int">Date</th>
