Plugin jQuery : tablesorter, trier les élements d’un tableau

Lorsque l’on doit sur un site internet afficher des données tabulaires, il est fréquent qu’en plus on nous demande de permettre de trier ses données.

Avant de connaître jQuery, la méthode que j’utilisais était de simplement recharger la page avec en plus les paramètres de tri souhaités par le visiteur.

Désormais, c’est le poste client que l’on fait travailler grâce au javascript et notamment un plugin jQuery du nom de tablesorter.

Concrètement qu’est ce que ça donne ?

On commence par inclure le framework javascript jQuery ainsi que le plugin tablesorter.

[html]
<script src="public/scripts/jquery.js" type="text/javascript"></script>
<script src="public/scripts/jquery-tablesorter.js" type="text/javascript"></script>
[/html]

Du coté du HTML, on attribue simplement une classe supplémentaire aux tableaux que l’on souhaite manipuler.

[html]
<table class="tablesorter">
<thead>
<tr>
<th>Nom</th
<th>Prénom</th>
<th>Code Postal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Alfred</td>
<td>17000</td>
</tr>
<tr>
<td>Doe</td>
<td>John</td>
<td>53000</td>
</tr>
<tr>
<td>Dupond</td>
<td>Brian</td>
<td>44000</td>
</tr>
</tbody>
</table>
[/html]

Enfin, en javascript, on lance la fonction tablesorter sur nos tableaux.

[javascript]
<script type="text/javascript">
$(document).ready(function() {
$("table.tablesorter").tablesorter();
});
</script>
[/javascript]

Je vous laisse le soin de consulter le site internet du plugin pour y regarder les paramétrages disponibles ainsi que la mise en forme possibles des tableaux.

Liens :

• Site du plugin tablesorter.