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

  1. Yop dit :

    $(document).ready(function() {
    $(‘#example’).dataTable();
    } );

    On met ce code dans un css???

  2. Lau dit :

    Un css ??
    c’est du javascript !
    example est l’ id de ton tableau.
    ce code sert à appeler la fonction dataTable() qui va faire tout le boulot

  3. kenpachi dit :

    bsr

    je voulais avoir du l’aide svp car j fé tous ca mé rien ne s’affiche un simple table avec les données dedans , tout les librairies sont incluent , je c pas il est ou le probleme :s.

  4. Xavier dit :

    Bonjour,
    @kenpachi, As tu bien pensé a insérer entre tes balise ton fichier jquery et js de datatable.

    Merci pour cette information, j’utilise ce plugin jquery et je le trouve vraiment bien sympas.

  5. Yep dit :

    Salut,

    J’ai moi aussi un problème. Après avoir (je pense) correctement chargé les différentes librairies ( et ).
    J’ai mon tableau qui est « brut », comme si le CSS n’était pas chargé !!! Est-ce qu’il faut préciser où se trouve le CSS dans le package? ou bien devrait-il aller le chercher tout seul?
    Les champs (search et shows) fonctionnent correctement.
    Voici un lien de la capture d’écran de ma datatable : http://www.hostingpics.net/viewer.php?id=884154datatable.png

  6. En effet pour ne pas avoir le tableau « brut » il faut charger le CSS.

    Dans le dossier media/css, on en trouve 2-3.

    Code a rajouter entre et (vérifier le chemin d’accès au fichier css selon votre structure)

  7. Thomas dit :

    merci !

Laisser un commentaire

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