Mettez de la vie dans vos tableaux avec jQuery DataTables

jquerydtable

Quand on a un tableau HTML qui comporte beaucoup de données il peut être intéressant de rajouter quelques options autour de celui-ci pour faciliter l’ergonomie de l’utilisateur. Notamment offrir la possibilité de trier ces données à la volé (sur une ou plusieurs colonnes), mettre au pied de ce tableau une pagination, insérer une boite de recherche dynamique, et un tas d’autres options…
Heureusement il existe jQuery DataTables, un plugin crée par Allan Jardine qui propose de dynamiser vos tableaux en seulement quelques lignes de codes. A l’aide d’un exemple nous allons voir dans cet article comment installer et utiliser ce plugin.

Les possibilités de jQuery DataTables :

  • Pagination des données de votre tableau.
  • Tri des données sur une ou plusieurs colonnes.
  • Filtres à la volé.
  • Boite de recherche en temps réel.
  • Multi-langages.
  • Support des thèmes de jQuery ThemeRoller UI.
  • Grande variétés de add-ons (TableTools, FixedHeader, KeyTable…).
  • Possibilité de copier, imprimer ou d’exporter votre tableau sous format PDF, CSV ou Excel.
  • C’est gratuit!

Installation et utilisation du plugin

Rien de très compliqué de ce côté là, vous aurez besoin de deux fichiers :

Avec notre tableau HTML (dont l’id est « exemple ») cela donne :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript" src="js/dataTables.js"></script> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
<thead> 
<tr> 
<th>Rendering engine</th> 
<th>Browser</th> 
<th>Platform(s)</th> 
<th>Engine version</th> 
<th>CSS grade</th> 
</tr> 
</thead> 
<tbody> 
<tr class="gradeX"> 
<td>Trident</td> 
<td>Internet
Explorer 4.0</td> 
<td>Win 95+</td> 
<td class="center">4</td> 
<td class="center">X</td> 
</tr> 
<tr class="gradeA"> 
<td>Gecko</td> 
<td>Mozilla 1.6</td> 
<td>Win 95+ / OSX.1+</td> 
<td class="center">1.6</td> 
<td class="center">A</td> 
</tr> 
<tr class="gradeA"> 
<td>Gecko</td> 
<td>Mozilla 1.7</td> 
<td>Win 98+ / OSX.1+</td> 
<td class="center">1.7</td> 
<td class="center">A</td> 
</tr> 
<tr class="gradeA"> 
<td>Gecko</td> 
<td>Epiphany 2.20</td> 
<td>Gnome</td> 
<td class="center">1.8</td> 
<td class="center">A</td> 
</tr> 
<tr class="gradeA"> 
<td>Webkit</td> 
<td>Safari 1.2</td> 
<td>OSX.3</td> 
<td class="center">125.5</td> 
<td class="center">A</td> 
</tr> 
<tfoot> 
<tr> 
<th>Rendering engine</th> 
<th>Browser</th> 
<th>Platform(s)</th> 
<th>Engine version</th> 
<th>CSS grade</th> 
</tr> 
</tfoot> 
</table>

Il ne nous reste plus qu’à ajouter ces quelques lignes dans votre document HTML:

<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );</script>

Et voila c’est terminé. Cliquez ici pour voir la démonstration en ligne.

Vous trouverez toute la documentation nécessaire sur le site de l’auteur si vous souhaitez utiliser toute les possibilités du plugin.

Nicolas Verhoye

Développeur Magento, Freelance

Laisser un commentaire

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