Le web avance et cet article date de avril 2015, son contenu peut ne plus être pertinent ou d'actualité.

Plugin DataTable – “show row”

Suite aux échanges avec le développeur de DataTable, “show row” a évolué et est désormais disponible dans les plugins proposés par DataTable. La suite de cette article : DataTable : plugin row().show() est disponible.

DataTable

DataTable est un plugin pour la librairie Javascript : jQuery. Il permet à partir d’un set de données ou bien même d’un tableau HTML, la création de tableaux dynamiques, riches et flexibles. Il offre de nombreuses options comme une recherche rapide, du tri, de la pagination. Je vous invite à découvrir ce plugin pour en connaître les nombreuses possibilités.

Problématique

Bien que ce plugin offre de très nombreuses options, dans son fonctionnement de base il ne propose pas une qui peut vite se révéler indispensable : trouver et afficher une ligne, sans modifier le contenu du tableau. C’est à dire afficher la bonne page de pagination pour voir une ligne voulue.

Les cas de figures problématiques que j’ai rencontré sont :

  • afficher une ligne après sa création, quel que soit la méthode de tri utilisé dans le tableau
  • afficher une ligne après modification et que sa position ait changée (si par exemple un tri sur la colonne modifiée est en place)

Ainsi vous êtes obligé de rechercher manuellement la ligne dans votre tableau, ce qui n’est pas l’idéal pour avoir une vue directe dessus et vérifier les données créées ou modifiées.

Le plugin datable-show-row

DataTable possédant une API assez riche et notamment des possibilités de développement de plugins, j’en ai créé un afin de répondre à cette problématique : datatable-show-row.

Suivant, la documentation de DataTable, ce plugin se chaine avec les éléments de l’API rows et permet donc d’afficher une ligne sélectionnée, une ligne mise à jour ou encore une ligne nouvellement créée et ajoutée à un tableau.

// Show the row "#row_example"
table.row( '#row_example' ).r_show();

// Update the row and show it after drawing and reorder
table.row( '#row_example' ).data({ [some data] }).draw().r_show();

// Create a row and show it
table.row.add({ [some data] }).draw().r_show();

Ce plugin permet la même chose que le plugin fnDisplayRow, à la différence que datatable-show-row fonctionne avec la nouvelle API de DataTable introduite à partir de la version 1.10.

Télécharger “datatable-show-row”

DataTable-Show-Row peut être récupérer à partir de mon GitHub, des exemples d’utilisation y sont également disponibles.

 

datatable-show-row

La suite de cette article : DataTable : plugin row().show() est disponible.

Publié le par Edouard dans Développement , javascript , jQuery