jQuery : plugin DataTable
1321 2 J'aime !

jQuery : plugin DataTable

Publié par Yann GROSYEUX

Si tu as épuisé tes cartouches avec jQGrid et que tu ne peux plus te passer de responsive, enrichis tes tableaux HTML avec un plugin jQuery qui sort vraiment du lot : DataTable.

L'affichage des tableaux HTML s'est considérablement amélioré ces dernières années, et l'apport des composants jQuery a dopé les fonctionnalités de nos chers petits tableaux. Je suis tombé (un peu comme d'habitude) complètement par hasard sur ce composant jQuery pas piqué des hannetons.

 

Le besoin était assez simple : pouvoir enrichir un tableau HTML dont le nombre de colonnes était dynamique, avec des fonctionnalités d'export (XLS et PDF), et le gel de la première colonne.

 

J'avais l'habitude d'utiliser le composant jQGrid, qui constituait jusqu'à présent ma référence dans les plugins pour les tableaux. Il permet de requêter un serveur en AJAX, en gérant la pagination, les filtres dynamiques, les tris, et tout ce qu'on peut attendre de ce genre d'outil. Associé aux thèmes jQuery UI, il ne dénotait pas. Mais voilà... il n'est pas responsive, et il commence à dater. Il était donc temps de benchmarker pour voir si l'herbe n'était pas plus verte ailleurs laughing.

 

Du coup, après quelques recherches, je suis tombé sur jQuery Datatable !

 

jquery-datatable-oreros-online

Exemple d'utilisation de jQuery Datatable

 

Les sources de données 

Le composant se base sur différentes sources de données pour coller au besoin :

  • le DOM HTML
  • un tableau javascript
  • un objet JSON
  • une requête AJAX
  • un script PHP qui renverra du JSON

 

Les options et fonctions

Une fois ton objet Datatable instancié ( $('#example').DataTable(); ), il n'y a plus qu'à jouer avec laughing.

 

Le plugin va te permettre

  • de choisir et réordonner les colonnes, d'en trier le contenu sur un ou plusieurs axes, d'en geler une ou plusieurs pour naviguer de manière plus agréable dans un tableau nécessitant une barre de navigation latérale
  • de réordonner les lignes 
  • de définir le nombre d'enregistrements à afficher pour chaque page
  • d'exporter vers le presse-papier, ou au format Excel, ou au format PDF
  • d'autoriser la sélection de cellules, de lignes, ou de colonnes
  • de filtrer les enregistrements avec un unique champs de recherche 

 

jquery-datatable-responsive-oreros-online

Gestion du responsive design

 

Il est multilingue (basé sur des fichiers de traduction des intitulés), responsive (en s'appuyant sur des points de ruptures au delà desquels certaines informations figurant en colonnes seront présentées de manière à s'afficher correctement sur des smartphones ou tablettes). Je n'ai jusque là pas été bloqué (rafraîchissement, pilotage des boutons, etc) : son API est particulièrement complète tongue-out.

 

Le chartage

Le plugin est compatible avec jQuery UI, Bootstrap ou Foundation.

 

jquery-datatable-jquery-ui-oreros-online

Le chartage avec jQuery UI

 

jquery-datatable-bootstrap-oreros-online

Le chartage avec Bootstrap

 

jquery-datatable-foundation-oreros-online

Le chartage avec Foundation

 

Si ça ne te suffit pas, ou que tu n'utilises pas ces framework, tu peux définir ta propre feuille de style via le créateur de thème (https://www.datatables.net/manual/styling/theme-creator).

 

jquery-datatable-theme-creator-oreros-online

Le créateur de feuille de style

 

Il a trouvé sa place dans le back-office du blog pour gérer les listes wink.

 

jquery-datatable-exemple-oreros-online

Exemple d'utilisation de jQuery Datatable – Oreros Online

 

Toute la documentation et les exemples sont à retrouver sur https://www.datatables.net/.

1321 2 J'aime !

Un commentaire ? Réagissez !