Jquery Modal Dialog Edition Création Suppression

Introduction

Pour le besoin d'un projet, j'ai créé ces deux types de tableaux, un tableau classique mise en forme en CSS et un tableau mise en forme avec la nouvelle version de DataTables 1.10.x.
A partir de l'une de ces deux pages nous pouvons via une boite Modal Dialog JQuery UI ajouter des enregistrements.
Dans le tableau 2 icônes mises en forme via JQuery permettent l'édition et la suppression d'un enregistrement toujours via une boite Modal Dialog JQuery UI.

classiquedatatables

La particularité de ces deux tableaux résides dans le fait que ni l'un ni l'autre utilisent de fichiers locaux (css, js, datatable etc). Mise à part le fichier CSS de présentation de la page et de mise en forme des formulaires des modal dialog JQuery.
Les serveurs CDN sont utilisés pour tous.
Si vous voulez avoir les fichiers en local, téléchargez-les sur les sites appropriés.


D'ailleurs voici l'arborescence de l'archive que vous trouverez en téléchargement.
arbo Les deux tableaux utilisent une table SQL pour l'affichage des données.
Les deux tableaux utilisent MySQL et une boucle While pour parcourir les données, on aurait pu aussi pour le tableau JQuery utiliser Server Side ou Ajax.
Pour ceux qui préférerons utiliserons soit PDO ou MySQli.
Les noms des champs de la table sont en Majuscule, ceci afin de différencier les noms des champs du formulaire et celui de la table dans les scripts JavaScript.

 

Concernant l'ajout d'enregistrement dans la table, lors du clic sur le bouton la boite de dialogue affiche un formulaire d'insertion, ce formulaire contient 2 champs textes, et 2 listes déroulantes.
Pour le champ (matricule) ce dernier doit être uniquement numérique, et géré par le script.
Les 2 listes déroulantes ont des valeurs en dur, pour le peu qu'elles ne soient pas nombreuses.
Sinon la génération de liste déroulante en Php/MySQL fonctionne aussi, et que j'ai pu tester.

 

Concernant la nouvelle version de DataTables la syntaxe à changer, pour ma part elle offre plus de flexibilité dans la mise en oeuvre du tableau.
Pour cela, il suffit de se donner la peine de consulter les API (en anglais) pour trouver ce que l'on cherche à faire.
Je n'ai mis ici que le strict nécessaire, à vous de l'améliorer.

 

Par ailleurs, lors de l'affichage des données dans le tableau classique la clause ORDER BY est respectée. Ce qui n'est pas le cas avec le tableau avec DataTables, pour cela je vous laisse chercher dans les API comment faire pour avoir soit des données ASC ou DESC.

 

L'inconvénient, si la table SQL comporte beaucoup d'enregistrement, le tableau classique ne comporte pas de pagination, ni de tri etc, ce qui au final peut faire un tableau très long, toutefois il peut être utilisé pour peu de données. Le tableau DataTables n'a pas cet inconvénient.

 

Si vous souhaitez tester ces deux pages en local sur votre serveur Wamp (par exemple) importer le fichier SQL dans votre base de données.
Puis éditer le fichier (connexion.php) pour l'accès à la base de données.
NOTA : C'est le seul fichier à modifier.

Le fichier (index.php) est pour le tableau classique, et le fichier (index_datatable.php) est pour le tableau DataTables.

Conclusion

Ce type d'application est de type CRUD, Cependant, le code de tous ces scripts, qui finalement ne sont fait que pour une seule table SQL.
Ce type d'application est un exemple, si vous souhaitez l'utiliser l'un ou l'autre des scripts JavaScripts ou l'ensemble, vous devrez les modifier en conséquence de votre table pour la quelle vous allez les utiliser.
De nombreux commentaires sont inclus dans les scripts.
Ce type d'application à sa place dans une interface d'administration par exemple.
Ce travail à nécessécité beaucoup de travail, de recherches, de tests.




Jquery Modal Dialog CRUD


Logiciel CRUD en PHP 5 / PDO permettant l'édition, la création et la suppression ceci à partir d'un tableau classique ou avec DataTables nouvelle version.
* Téléchargé ( 31  fois).