DataTables, affichez un tableau et triez ses données avec jQuery

18 mars 2011

DataTables est un plugin jQuery basé sur les fondements de l’amélioration progressive : accessibilité, sémantique et référencement. Il permet d’organiser un tableau HTML avec pagination, tri et filtres à la volée.

Les principales caractéristiques de DataTables sont :

  • la pagination des données
  • le tri des données sur une ou plusieurs colonnes
  • les filtres à la volée
  • le moteur de recherche
  • le multilingue
  • le support de JQuery UI Themeroller
  • l’export sous format PDF, CSV ou XLS

Installation du plugin

Pour mettre en place votre tableau dynamique, commencez par télécharger DataTables. Faites un appel à la librairie jQuery, ainsi qu’au plugin (fichier JS, images et feuilles de style). Ensuite, on va définir la structure de notre tableau HTML. Ici, il s’agit d’un tableau statique, mais vous pouvez bien sûr le générer dynamiquement via PHP en fonction de vos besoins. Pensez à déclarer des balises « th » dans le premier « tr » pour générer des entêtes à votre tableau.

<table id="example">
	<tr>
		<th>Rendering engine</th>
		<th>Browser</th>
		<th>Platform(s)</th>
		<th>Engine version</th>
		<th>CSS grade</th>
	</tr>
	<tr>
		<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>
		<td>Trident</td>
		<td>Internet Explorer 5.0</td>
		<td>Win 95+</td>
		<td class="center">5</td>
		<td class="center">C</td>
	</tr>
	...
	<tr>
		<td>Other browsers</td>
		<td>All others</td>
		<td>-</td>
		<td class="center">-</td>
		<td class="center">U</td>
	</tr>
</table>

Votre tableau est en place. Il ne reste plus qu’à dynamiser le tableau avec le code suivant. Si on ne passe aucun paramètre, DataTables va prendre les dix premières données du tableau pour générer la première page, et ainsi de suite.

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

DataTables est donc un plugin jQuery très pratique pour mettre en forme facilement vos tableaux HTML. Les possibilités d’utilisation et de personnalisation sont immenses ! Tout un tas d’options sont à découvrir sur le site officiel.

Requis : jQuery
Démonstration : http://www.datatables.net/
Licence : GPL2, BSD

Commentaires

  • Voila un plugin que j’ai utilisé sur pas mal de projets pro, je conseil vivement car il st simple d’utilisation et facile à customiser.

  • Benoit Merieau

    Bonjour,

    Connaissez-vous un module (plug-in) pour créer un système de filtre des données par colonnes. Le module permettrait de faire apparaître que certaines données d’un tableau (filtre par régions françaises par exemple) à l’image d’un tableau utilisé sous Excel ou Calc (LibreOffice).

    « Tablesorter » est très utile mais ne permet d’aller jusque là à ma connaissance.

    Auriez-vous des éléments de réponse ?

    Par avance, merci.

    Cordialement,

    Benoît MERIEAU.

    • Heu… non, désolé ^^ Peut-être un développement spécifique serait plus approprié.

  • nouna

    Ce plugin marche-t’il si l’on a des images dans une des colonnes?
    merci