|
DataTablesDataTables
Exemple de tableau HTML implémentant DataTables
DataTables[1] (litt. "Tableau de données" en anglais) est un plug-in jQuery open-source permettant de dynamiser un tableau HTML. Créée par Allan Jardine sous la licence MIT, cette bibliothèque écrite en Javascript offre en effet un grand nombre de configurations pour améliorer l'ergonomie des grilles de données, surtout lorsqu'elles ont des proportions imposantes. Principe et possibilitésL'objectif de DataTables est d'améliorer l'accessibilité aux données dans les tableaux HTML[2]. En effet, les principaux inconvénients d'un tableau sans formatage sont :
Ainsi, l'ergonomie d'un tableau HTML basique est absolument faible. Pour remédier à cela, le plug-in a été développé. Ses fonctionnalités seront utiles aux 2 types de personne suivants :
Ainsi, la bibliothèque jQuery DataTables offre principalement les possibilités suivantes[3] :
Cette liste est non-exhaustive. Via la configuration du développeur, un grand nombre d'éléments sont personnalisables[6]. Exemple d'utilisationTableau HTML de basePrenons la situation suivante pour montrer concrètement ces aspects. Imaginons un développeur dans une firme multinationale. La Directrice des Ressources Humaines veut pouvoir consulter la liste du personnel de l'entreprise, avec une multitude d'informations pour chaque individu (Nom, prénom, âge, fonction, lieu de travail, salaire, etc.). Avec le langage HyperText Markup, notre informaticien utilisera la balise table permet de construire une grille de données basique (voir les images ci-dessous).  <body>
...
<table>
<thead> <!-- Définition de l'en-tête (nom des colonnes) -->
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody> <!-- Données du tableau -->
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
</tbody>
</table>
...
</body>
Implémentation de DataTablesAvec un peu de formatage CSS, le développeur pourrait améliorer son aspect visuel. Mais le plug-in DataTables propose une mise en forme basique épurée, et surtout une interface très agréable qui répond aux problèmes cités précédemment[7].
Pour appliquer les fonctionnalités de DataTables à notre tableau HTML, il faut ajouter les lignes suivantes aux blocs <head>
...
<!-- Importation des règles de mise en page basique de DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/w/dt/dt-1.10.19/datatables.min.css">
</head>
<body>
...
<table id="example">
... <!-- Partie inchangée. Voir code précédent. -->
</table>
...
<!-- Importation de la bibliothèque jQuery (sur laquelle DataTables se base) -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Importation du plug-in DataTables -->
<script type="text/javascript" src="https://cdn.datatables.net/w/dt/dt-1.10.19/datatables.min.js"></script>
<!-- Script pour appliquer DataTables au tableau ci-dessus -->
<script>
$('#example').DataTable();
</script>
</body>
Le résultat de ces ajouts est visible ci-contre. Le contenu du tableau n'a pas changé, mais la mise en forme des données a été largement améliorée.  D'abord, le tableau lui-même prend beaucoup moins de place, et ce, grâce à la pagination. En bas à droite se trouvent un ensemble de boutons pour se déplacer dans les pages, et le texte en bas à gauche mentionne la position de l'utilisateur dans le tableau. Ensuite, un sélecteur en haut à gauche offre la possibilité d'afficher plus de lignes sur chaque page. Enfin, et pas des moindres, l'interface présente en haut des outils de filtrage et de tri. Par défaut, le tableau est trié par ordre croissant, ou alphabétique, sur la première colonne, mais le tri peut-être changé et inversé en cliquant simplement sur les noms de colonne. En outre, saisir un extrait de texte dans la barre de recherche retirera toutes les lignes qui ne contiennent pas du tout la chaîne de caractères. Toutes ces fonctionnalités sont obtenues en appelant la méthode Mise en forme avancéeEn important les fichiers CSS/JS d'un framework, ou en les créant soi-même, il est possible de personnalisé la mise en page des tableaux. DataTables est compatible avec un grand nombre de frameworks, comme Boostrap, Foundation, Semantic UI, jQuery, JSON, UI ThemeRoller, Material Design, ou encore UIKit 3, ce qui permet d'adapter la forme des tableaux au reste du site web. Les possibilités sont grandes, allant de la simple colorisation alternée des lignes ou la colorisation au passage de souris, à l'ajout de barres de défilement verticale ou horizontale ainsi que la superposition de plusieurs tableaux au moyen des "tabs" (en français "languettes"). InstallationEn fonction de l'environnement de programmation du site web, vous pourrez importer les codes source de DataTables[4], via le réseau de diffusion de contenu DataTables CDN, ou en les téléchargeant localement. Le site officiel du plug-in propose un constructeur de téléchargement[8], permettant d'importer les paquets en fonction des options choisies en amont (framework de mise en forme, extensions, etc.). ExtensionsL'utilisation basique de DataTables peut être complétée par l'ajout d'extensions, à importer au préalable, et dont l'activation doit être déclarée le plus souvent dans les configurations. Le site officiel présente l'installation et les paramètres de ces extensions, dont voici les principales :
Références
|
