4. Une ‘vraie’ table dynamique

Dans ce cas, il faudra implémenter les boutons pour le tri par colonne et les intégrer avec les extraits précédents. Nous allons devoir utiliser un nouvel extrait de code pour l’affichage de la table car celle ci doit être réactive aux boutons. Il y a plusieurs manières de faire, en voici une qui va utiliser la même table JavaScript que l’exemple précédent. Pour être compréhensible j’utilise deux extraits de code, mais dans l’exemple vu que les deux seront appelés au même endroit de l’article ils auraient pu être être regroupés dans un seul snippet.

Un extrait coté Javascript

Dans un premier temps nous créons un premier extrait de code, qui est similaire à l’extrait id="3478" mais ou on enlèvera la ligne correspondant à la balise <div> et la ligne correspondant à l’appel de la fonction Disp_Nodes_Table, ces deux éléments seront inclus dans la partie table dynamique. Comme nous définissons la table JavaScript dans le même extrait que les fonctions, nous pouvons laisser en place gxmldisplay_init et gxmldisplay_selector. Nous obtenons un snippet (par exemple id="3505") qui définit nos données.

Un extrait coté table dynamique

Dans un second temps, nous intégrons la table avec les boutons dans un second fragment de code (par exemple id="3506"), toujours en tant qu’extrait HTML, ce qui va nous donner :

C’est la table typique que l’on retrouve dans les pages HTML utilisées comme exemple pour GXMLDISPLAY, avec deux différences : i) les balises HTML doivent être écrites en minuscules et ii) quelques commandes CSS sont incluses via des attributs style pour les boutons et la table.

Test drive

Il ne reste plus qu’à appeler les snippets id="3505" et id="3506", ce qui va nous donner comme résultat (cliquer sur un bouton pour afficher la table triée correspondante) :

---

La balise <form> n’est pas nécessaire, mais sa disparition nécessitera un travail sur les marges, pour la table et le conteneur <div>. Une autre possibilité aurait été de générer ce code de table, à la volée, via une fonction Javascript qui aurait été intégrée dans le premier fragment, nombre de fragments vs. lisibilité du code, c’est à chacun de faire ses choix.

5. Conclusion

Au final il est encore possible d’intégrer des tables dynamiques dans du contenu WordPress. En plus nous disposons d’un outil léger qui peut s’utiliser dans différents cas de figures : site local, sur un serveur, via WordPress. Et comme cette approche est maitrisée, elle peut s’adapter à d’autres applications et s’intégrer dans une chaine de publication. L’extension WPCode est bridée en mode léger (WPCode Lite) mais suffisante pour l’ensemble des exemples proposés dans cet article. Il existe d’autres plugins, également maintenus et populaires, peut être l’objet d’une autre expérimentation.