Tableau datatables avec les cellules editable et sauvegardees


Tutorial mis à jour le (29/03/2014)

Introduction

Nous allons voir avec ce tutorial, comment rendre des cellules éditables contenant des données provenant d'une base de données et sauvegarder les nouvelles valeurs.
Ce nouveau tutoriel se verra plus simple que celui que vous avez connu.

datatable editable

Projet

Nous allons donc à travers ce tutorial, construire un projet simple avec une base de données pour avoir un tableau comme sur l' images ci-dessus.
Commencer par télécharger l'archive * Téléchargé ( 445  fois)


Dézipper l'archive est faite l'import du fichier (table.txt) dans PhpMyAdmin dans une de vos bases de données.

 

Ouvrez ensuite le fichier (index.php) pour configurer vos accès à la base de données.

Ouvrez ensuite le fichier (sauverMod.php) pour y configurer de nouveau vos accès à la base de données.


Une fois que vous avez configuré ces deux fichiers, exécuter le fichier (index.php) dans votre navigateur.

Usage :
Double cliquer sur une des valeurs pour faire apparaitre un champ texte éditable, puis modifier la valeur et cliquer dans le tableau sur une zone non éditable, la valeur devrait avoir changée. puis faite d'autres essais de changement de valeur, et vérifier quand même si elle ont été modifiées dans la table de la base de données.

 

Remarque

Le fichier (index.php) fait appel à des scripts via CDN (JQuery, JQuery Ui, Datatables.js).
Je vous laisse analyser les fichiers, vous pourrez ainsi, intégrer ces scripts sans difficultés dans vos projets, mise à part qu'ici une configuration du script Datatables est minimale. Ce genre de script je l'utilise moi même dans mon back-office, ce qui m'évite de faire un formulaire d'édition qui est bien plus compliqué (enfin pas pour moi).

 

Bon dev