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