DataTables CRUD (create, read, update, delete) jquery ui

Introduction

Ce tutoriel vous permettra d'effectuer à partir d'une seule page, la création, l'édition et la suppression d'un enregistrement à travers de boite modal JQuery UI.

Coder ces scripts ne seront effectifs que pour une seule table de la base de données, cependant la structure de la table que je metterais auront les colonnes en majuscules,
ceci afin de bien les repérer dans tous les scripts qui vont suivre.

Toutefois si reprenez ces codes pour l'une de vos tables, vous devrez être attentif entre les noms des colonnes de la base MySQL et ceux des formulaires et du tableau qui utilisera le plugin DataTables.

Etape 1

Pour commencer, créer un dossier nommé (crud_jquery) sur votre serveur web (local).
Concernant votre serveur web, vous devez avoir une version de PHP >= à 5.5.x voir 5.6.x

Structure du dossier (crud_jquery) dans le dossier (www) de votre serveur web local

crud jquery

Etape 2

Ci-dessous la table référence du tutoriel.

          --
          -- Structure de la table `employes`
          --
          
          CREATE TABLE IF NOT EXISTS `employes` (
            `ID` int(11) NOT NULL AUTO_INCREMENT,
            `MAT` int(3) DEFAULT NULL,
            `NOM` varchar(50) DEFAULT NULL,
            `SRV` varchar(3) DEFAULT NULL,
            `POSTE` varchar(50) DEFAULT NULL,
            `DAT` date DEFAULT '0000-00-00',
            `MEMBRE` char(3) NOT NULL,
            `listingid` int(11) NOT NULL,
            PRIMARY KEY (`ID`),
            KEY `MAT` (`MAT`),
            KEY `NOM` (`NOM`),
            KEY `SRV` (`SRV`),
            KEY `POSTE` (`POSTE`)
          ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;
          
          --
          -- Contenu de la table `employes`
          --
          
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(1, 200, 'DAVID', 'D11', 'PROGRAMMEUR', '2016-02-27', 'oui', 3);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(2, 180, 'MARILYNE', 'D11', 'PROGRAMMEUR', '2014-06-27', 'non', 4);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(3, 60, 'IRENE', 'D11', 'CHEF SERVICE', '2014-05-12', 'oui', 5);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(4, 320, 'RAIMON', 'D01', 'CONCEPTEUR', '2014-05-12', 'non', 6);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(5, 330, 'AUGUSTE', 'D01', 'CONCEPTEUR', '2014-03-21', 'oui', 7);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(6, 340, 'ROGER', 'D01', 'CONCEPTEUR', '2014-03-21', 'non', 8);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(9, 30, 'JEANNE', 'C01', 'CHEF SERVICE', '2014-11-22', 'non', 2);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(10, 20, 'MICHEL', 'B01', 'CHEF SERVICE', '2014-11-22', 'non', 11);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(11, 120, 'JEAN', 'A00', 'COMPTABLE', '2014-09-27', 'oui', 12);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(12, 10, 'CHRISTIAN', 'A00', 'DIR, GENERAL', '2014-09-27', 'oui', 13);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(13, 250, 'DANIELE', 'D21', 'PROGRAMMEUR', '2014-04-23', 'oui', 14);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(14, 260, 'SVLVIE', 'D21', 'PROGRAMMEUR', '2014-04-23', 'oui', 15);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(15, 270, 'MARIE', 'D21', 'PROGRAMMEUR', '2014-07-13', 'oui', 16);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(16, 50, 'GEORGES', 'E01', 'CHEF SERVICE', '2014-10-10', 'oui', 17);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(17, 90, 'HELENE', 'E11', 'CHEF SERVICE', '2012-11-06', 'oui', 18);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(18, 280, 'ANNE', 'E11', 'OPERATEURICE', '2012-06-05', 'oui', 19);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(19, 290, 'HENRI', 'E11', 'OPERATEUR', '2007-06-20', 'oui', 20);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(20, 300, 'PHILIPPE', 'E11', 'OPERATEUR', '2012-11-07', 'oui', 21);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(21, 310, 'MAUDE', 'E11', 'OPERATEUR', '2014-01-31', 'non', 22);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(22, 6, 'MACLEOD', 'A03', 'DEVELOPPEUR', '2013-12-31', 'non', 23);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(23, 500, 'MACMICRO', 'A01', 'DEVELOPPEUR', '2014-08-20', 'non', 1);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(24, 110, 'VINCENT', 'A00', 'DIR. ADJOINT', '2014-08-20', 'non', 25);
          INSERT INTO `employes` (`ID`, `MAT`, `NOM`, `SRV`, `POSTE`, `DAT`, `MEMBRE`, `listingid`) VALUES(25, 100, 'THEODORE', 'D01', 'CHEF SERVICE', '2014-08-20', 'non', 24);
        

Détails de chaque fichier

Les scripts PHP ainsi que la connection à la base de données utiliseront PDO.

Le fichier (pdo.php) contient la connection à la base de données.

Le fichier (crud_ajout.php) permet l'insertion d'un enregistrement en mode création.

Le fichier (crud_edit.php) permet l'édition d'un enregistrement.
Le fichier (crud_delete.php) permet la suppression d'un enregistrement.
Les fichiers se trouvant dans les dossiers (css, js et images) seront à télécharger et à placer comme sur l'image.

* Téléchargé ( 3  fois)

Les deux fichiers du dossier (js) correspond pour l'un à la mise en forme des (select) dans le formulaire, le second pour le fonctionnement du DatePicker.
Les deux fichiers du dossier (css) correspond pour l'un à la mise en forme des (select), le second pour tout le reste (template, formulaire, etc).
Quand au reste des fichiers ces derniers seront utilisés via CDN.

Templates page (crud_datatables.php

Ceci est la page de présentation, les blocs de codes suivants seront à placer aux endroits indiqués.

            <!doctype html>
            <html lang="fr">
            <head>
            <meta charset="utf-8">
            <title>DataTables 1.10.x - CRUD JQuery UI</title>
            <meta name="Description" content="DataTables 1.10.x - CRUD JQuery UI" />
            <meta name="robots" content="all" />
            </head>
            <body>
            <div id="wrapper"><!-- #wrapper -->
                <header><!-- header -->
                    <h1><a href="#">Macmicro Développement</a></h1>
                    <h2>Développement de site web</h2>
                </header><!-- fin de header -->
                <nav><!-- top nav -->
                    <ul>
                            <li><a href="http://macmicro.chez.com/">Accueil</a></li>
                    </ul>                
                </nav><!-- fin de top nav -->    
                <div class="nav2">
                 
                </div>
                <section id="main"><!-- #main content and sidebar area -->
                  <section id="content"> <!--#content -->
                    <p id="ptitle">DataTables 1.10.x - CRUD DataTables.</p>
                    ICI INSERTION DES BOUTONS DU TABLEAU ET DES BLOCS FORMULAIRES
                  </section> <!--fin de #content -->
                </section><!-- fin de #main-->
                
                <footer>
                  <section id="footer-area">
                    <section id="footer-outer-block">
                      <aside class="footer-segment">
                        <p> </p>
                      </aside>
                      <aside class="footer-segment">
                        <p> </p>
                      </aside>
                      <aside class="footer-segment">
                        <p> </p>
                      </aside>
                      <aside class="footer-segment">
                        <p> </p>
                      </aside>
                      <aside class="footer-segment">
                        <p> </p>
                      </aside>
                    </section><!-- fin de footer-outer-block -->
                  </section><!-- fin footer-area -->
                </footer><!-- fin footer -->
                
            </div><!-- #wrapper -->
            </body>
            </html>
            <?php
            $sql->closeCursor();
            ?>            
        

Code de connection à la base

Nous allons commencer par la page (crud_datatables.php) qui est la page principale.
Créer cette page avec votre éditeur favoris, elle doit avoir un doctype Html5 et en UTF-8.
Au dessus du Doctype ajouter le code ci-dessous, qui fait référence au fichier de connection à la base (pdo.php), puis la requête SELECT.

            <?php
            require_once('pdo.php');
            
            try
            {
                $sql = $PDO->query("SELECT * FROM employes");
            }
            catch(PDOException $e) {
                      $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
                      die($msg);
                    }
            ?>
        

Intégration des fichiers

Placer ces fichiers dans la section (<head> et </head>) de la page

            <link rel="stylesheet" href="css/crud.css" type="text/css" media="screen" />
            
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
            <link href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css" rel="stylesheet" type="text/css">
            <link href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css" rel="stylesheet" type="text/css">
            
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
            <script src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
            <script src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>
            
          <link rel="stylesheet" href="css/dd.css" />
          <script src="js/jquery.dd.min.js"></script>
          <script src="js/ui.datepicker-fr.js"></script>
         

Code JavaScript

Dans ce long script à placer dans la section (<head> et </head>), vous devrez le personnaliser à la table MySQL que vous allez utiliser.
Ce script peut être externalisé dans un fichier (js).
Ce script comporte deux fonction (datepicker), dont un pour la création et l'édition d'un enregistrement, ces fonctions fonctionne avec un champ caché permettant de choisir une date en Français, puis d'afficher cette même date au format MySQL dans le champ caché.
Quoi qu'il en soit vous n'aurez certainement pas besoin de tous, cela dépend de votre table. De toute façon, vous devrez modifierune grande majorité de code par rapport à votre table. De plus j'ai commenté ce code un maximum.

            <script type="text/javascript" class="init">
            $(function() {
                /* DATEPICKER : sélection de date */
                $("#idDateFR").datepicker({ 
                    //dateFormat: 'dd-mm-yy', 	// de la forme : Vendredi 27 01 2012
                    showAnim: "slide",
                    altFormat: 'yy-mm-dd', altField: '#dat'	// (champ caché) format yyyy-mm-dd (ISO)
                }); 
                
                $("#DateFR").datepicker({ 
                    //dateFormat: 'dd-mm-yy', 	// de la forme : Vendredi 27 01 2012
                    showAnim: "slide",
                    //firstDay:1,
                    altFormat: 'yy-mm-dd', altField: '#edat'	// (champ caché) format yyyy-mm-dd (ISO)
                }); 
                
                /* ajout des classes à tous les inputs */
                $("input").not(':button, :reset').each(function () {
                    $(this).addClass("text ui-widget-content ui-corner-all");
                });	
            });//fin fonction
            
            $(document).ready(function() {
                var oTable = $('#menuTable').DataTable( {
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
                    "order": [[ 0, "desc" ]],
                    "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.13/i18n/French.json"},
                    "mark": true,
            
                    "columnDefs":[
                        {
                            "targets":[0, 1, 6, 7],
                            "orderable":false,
                            "searchable": false,
                        },
                    ],
            
                    "fnDrawCallback": function() {
                        $(this).show();
                        $('div#loader').hide();
                        $(this).show().css('width', '100%');
                        $('.ui-corner-tr').prepend($('.toolb'));//ajout icone header
                        $('.ui-corner-tr').prepend($('.toolc'));//ajout icone header
                    },
                    
                    "initComplete": function () {
                        var api = this.api();
                        api.$('td.api').click( function () {
                            api.search( this.innerHTML ).draw();
                        } );
                    }
                    
              } );//fin datatable
                 /*bouton à coté du champ recherche reset*/
                $('button.btn').click(function() {
                    $('input[type=search]').val('');
                    //oTable.fnFilter(''); //ne fonctionne pas avec DataTable mais avec dataTable 
                    oTable
                    //.columns(4)
                    .search('')//this.value
                    .draw();
                } );
            
                $("button.btn" ).button({
                    icons: { primary: 'ui-icon-refresh' },
                    text: false
                });
                /* mise en forme des select*/
                $("select").msDropdown();
            
                //attribution d'icones jquery au lien supprimer et edition
                $('a.delete_user')
                  .button({
                    icons: { primary: 'ui-icon-trash'  },
                    text: false
                  });
             
                $('a.edit')
                  .button({
                    icons: { primary: 'ui-icon-pencil'  },
                    text: false
                  });
            
                $('#create-user')
                  .button({
                    icons: { primary: 'ui-icon-plus'  },
                    text: true
                  });
                  
                var mat    = $("#mat"),
                    nom    = $("#nom"),
                    srv    = $("#srv"),
                    poste  = $("#poste"),
                    date   = $("#dat"),
                    membre = $("#membre")
                    allFields = $([]).add(mat).add(nom).add(srv).add(poste).add(date).add(membre);
             
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 550,
                    width: 600,
                    modal: true,
                    draggable: true,
                    resizable: false,
                    cache: false,
                    buttons: {
                        'Ajouter': function() {
                            allFields.removeClass( "ui-state-error" );
                            var matricule = jQuery.trim($("#mat").val());
                            var nom = jQuery.trim($("#nom").val());
                            var service = jQuery.trim($("#srv").val());
                            var poste = jQuery.trim($("#poste").val());
                            var date = jQuery.trim($("#dat").val());
                            var membre = jQuery.trim($("#membre").val());
                            var matNumberRegex = /^\d*$/;//champ matricule uniquement numérique
                           /*check des champs des formulaires*/
                          if(matricule == ""){
                             $("#mess").append("<li class=\"ui-state-error ui-corner-all mat\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez saisir un matricule! </li>");
                             $("#mat").addClass("error");
                            }
                          else if ( !matNumberRegex.test( matricule ) ) {
                              $(".mat1").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all mat1\"><span class=\"ui-icon ui-icon-notice\"></span>Le matricule doit être composé qu'avec des chiffres !</li>");
                             return false;
                          }
                          else if(nom == ""){
                              $(".mat").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all nom\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez saisir un nom !</li>");
                              $("#nom").addClass("error");
                              }
                          else if(service == ""){
                              $(".nom").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all srv\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez saisir un service !</li>");
                              $("#srv").addClass("error");
                              }
                          else if(poste == ""){
                              $(".srv").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez saisir un poste !</li>");
                              $("#poste").addClass("error");
                              }
                          else if(date == "") {
                              $(".poste").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez choisir une date !</li>");
                              $("#dat").addClass("error");
                              }
                          else if(membre == "") {
                              $(".dat").hide();
                              $("#mess").append("<li class=\"ui-state-error ui-corner-all\"><span class=\"ui-icon ui-icon-notice\"></span>Veuillez validez le membre !</li>");
                              $("#membre").addClass("error");
                              }
                          else {
                          $("#formajax").trigger('submit');//soumission du formulaire
                          }
                        },
                        Fermer: function() {
                            $("#dialog-form").dialog('close');
                            location.reload(true);
                        }
                    },
                    close: function() {
                        allFields.val('').removeClass('ui-state-error');
                    }
                });
             
             
                $('#formajax').submit(function(e) {
                    e.preventDefault();
            
                    $.ajax({
                        type: 'POST',      // envoi des données en POST
                        //async: false, // Mode synchrone
                        url: 'crud_ajout.php', //fichier php avec requete d'insertion en bd    
                        data: $('#formajax').serialize(),// sélection des champs à envoyer
                        cache: false,
                         
                        success: function(value) { 
                            //retour des infos en Json et affichage dans la modal dialog
                            value = $.parseJSON(value);
                              var html  = "<div id='result'>";
                              html += "<p><div class='messon'>Insertion réussie</div></p>";
                              html += "<p><span>Matricule:</span> "+value.MAT+"</p>";
                              html += "<p><span>Nom:</span> "+value.NOM+"</p>";
                              html += "<p><span>Service:</span> "+value.SRV+"</p>";
                              html += "<p><span>Poste:</span> "+value.POSTE+"</p>";
                              html += "<p><span>Date:</span> "+value.DAT+"</p>";
                              html += "<p><span>Membre:</span> "+value.MEMBRE+"</p>";
                              html += "</div>";
                              
                            $("#dialog-form").html(html);
                            setTimeout("$('#dialog-form').dialog('close')",20000);
                            setTimeout(location.reload(true),20000);
                            /* permet de voir l'enregistrement insere*/
                            //location.reload(true);
                        }
                    });
                    return false; // Pour empêcher le submit vers la page 'action'
                });
             
             
              $( "#create-user" ).button().on( "click", function() {
                    $('#dialog-form').dialog('open');
                                
                    //stylisation du bouton avec ajout icone ui
                    $('.ui-dialog-buttonpane').
                    find('button:contains("Ajouter")').button({
                    icons: {
                        primary: 'ui-icon-check'
                    }
                    });
                    
                    $('.ui-dialog-buttonpane').
                    find('button:contains("Fermer")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                    });
              });
            
               //Creation de la boite de dialog
               $edit_dialog = $("#edit_dialog").dialog({
                autoOpen:false, 
                height: 560,
                width: 600,
                draggable: true,
                resizable: false,
                title:"Edition Employés", 
                modal:true, 
                buttons:[
                 {text: "Envoyer", click: function() 
                    { $('form',$(this)).submit(); 
                    setTimeout(function(){ location.reload()  }, 3000);
                    }, 
                    icons: { primary: "ui-icon-check" }},
                 
                 
                 {text: "Annuler", click: function() { $(this).dialog("close"); }, icons: { primary: "ui-icon-cancel" }},
                ]
               });
               
               //Submit action pour le formulaie de la boite de dialogue
               $("#edit_dialog form").submit(function() {
                var form = $(this);
                //publier les données du formulaire à l'attribut action
                $.post($(this).attr('action'), $(this).serialize(),function(data) {   
                 //obtenir élément DOM de mise à jour de la variable (emp)
                 var emp = $('#emp_'+data.id);
                 //on defénis une variable issu de la class (matricule) issue de la class de la balise td du tableau, 
                 //avec comme paramètre la variable (emp) puis on écrit avec la fonction html() la valeur du matricule dans le champ
                 //Mise à jour des éléments
                 $('.matricule',emp).html(data.matricule);
                 $('.nom',emp).html(data.nom);
                 $('.service',emp).html(data.service);
                 $('.poste',emp).html(data.poste);
                 $('.dat',emp).html(data.dat);
                 $('.membre',emp).html(data.membre);
                
                 //Fermeture de la boite dialog
                 $("#edit_dialog").dialog('close');
                },'json');
                
                //Pour empêcher le submit vers la page 'action'
                return false;
                
               });
            
               //quand le lien est cliqué édition
               function edit_link_action() {
                //obtenir la balise ayant la class (emp) la plus proche
                var emp = $(this).closest('.emp');
                
                //obtenir l'id de la balise tr
                var id = emp.attr('id').split('_');
                id = id[id.length-1];
                
                //Récupération des valeurs dans les champs du formulaire
                $('#edit_dialog input[name="id"]').val(id);
                $('#edit_dialog input[name="matricule"]').val($('.matricule',emp).html());
                $('#edit_dialog input[name="nom"]').val($('.nom',emp).html());
                $('#edit_dialog input[name="service"]').val($('.service',emp).html());
                $('#edit_dialog input[name="poste"]').val($('.poste',emp).html());
                $('#edit_dialog input[name="edat"]').val($('.dat',emp).html());
                $('#edit_dialog input[name="membre"]').val($('.membre',emp).html());
                
                //Ouverture de la dialog
                $edit_dialog.dialog('open');
                
                //Pour empêcher le submit vers la page 'action'
                return false;
               }
               
               //joindre l'action à modifier des liens
               $(".edit").click(edit_link_action);
            
                var currentUserId;
                
                $(".delete_user").click(function() {
                    currentUserId = $(this).data("user-id");
                    currentUserName = $(this).data("user-name");
                    $("#dialog_delete_user").dialog( "open" );
                    $("#dialog_delete_user").append("<span class=\"ui-state-highlight\">Etes vous sûr de vouloir supprimer l'employé " + currentUserName + ' N° ' + currentUserId + "</span>");
                          //stylisation du bouton avec ajout icone ui
                          $('.ui-dialog-buttonpane').
                          find('button:contains("Supprimer")').button({
                          icons: {
                              primary: 'ui-icon-check'
                          }
                          });
                          
                          $('.ui-dialog-buttonpane').
                          find('button:contains("Annuler")').button({
                          icons: {
                              primary: 'ui-icon-cancel'
                          }
                          });
                });
                
                $("#dialog_delete_user").dialog({
                    autoOpen: false,
                    resizable: false,
                    height: 200,
                    width: 450,
                    modal: true,
                    buttons: {
                        'Supprimer': function() {
                            $( this ).dialog( 'close' );
                            // ajax version
                            $.ajax({
                                type: "GET",
                                url : "crud_delete.php?user_id=" + currentUserId,
                            });
                            $('a.delete_user').parents('tr#emp_'+currentUserId).addClass("redBold").animate({ opacity: "hide" }, "slow");
                            //permet une animation sur la ligne supprimee
                            return false;
                        },
                        //Si l'utilisateur clique sur le bouton "annuler"
                        "Annuler": function() { 
                        $(this).dialog('close');
                        } 
                    }
                });
            
            });//fin ready
             </script>
        

Tableau, Formulaires, boutons

Dans la section (<body> et </body>).

Placer cette structure du tableau DataTables plus les données dynamique

La structure de ce tableau est indispensable pour l'utilisation du plugin DataTables.
Vous devrez adapter ce tableau en fonction de votre table de votre base de données.

          <div style="width:50%; margin: 0 auto 0 auto;">
                  <div id="loader"></div>
                  <table width="100%" cellspacing="0" class="display" id="menuTable">
                      <thead>
                          <tr>
                          <th>ID</th>
                          <th>Matricule</th>
                          <th>Nom</th>
                          <th>Service</th>
                          <th>Poste</th>
                          <th>Date</th>
                          <th>Membre</th>
                          <th>Action</th>
                          </tr>
                     </thead>
                      <tfoot>
                          <tr>
                          <th>ID</th>
                          <th>Matricule</th>
                          <th>Nom</th>
                          <th>Service</th>
                          <th>Poste</th>
                          <th>Date</th>
                          <th>Membre</th>
                         <th>Action</th>
                         </tr>
                     </tfoot>
                     
                     <tbody>
                  <?php
                  while ($datas = $sql->fetch(PDO::FETCH_ASSOC)) {	
                  ?>
                  <tr class='emp' id='emp_<?php echo $datas['ID']; ?>'>
                      <td class="status"><?php echo $datas['ID']; ?></td>
                      <td class="matricule"><?php echo $datas['MAT']; ?></td>
                      <td class="nom"><?php echo $datas['NOM']; ?></td>
                      <td class="service"><?php echo $datas['SRV']; ?></td>
                      <td class="poste"><?php echo $datas['POSTE']; ?></td>
                      
                      <td>
                      <div class="dat" style="display:none;"><?php echo $datas['DAT']; ?></div>
                      <?php 
                      $dates = $datas['DAT'];
                      $date_fr = strftime('%d-%m-%Y', strtotime($dates));
                      echo $date_fr;
                      ?>
                      </td>
                      <td class="membre"><?php echo $datas['MEMBRE']; ?></td>
                      <td>
                      <!--<a class="edit" href="#"></a> <a class="delete" href="#"></a> -->
                          <a href="#" data-user-name="<?php echo $datas['NOM'];?>" data-user-id="<?php echo $datas['ID']; ?>" class="delete_user">x</a>
                          <a class="edit" href="#"></a>     
                      </td>
                  </tr>
                  <?php
                   }
                  ?>
                  </tbody>
                  </table>
          </div>
        

Placez en dessous du tableau, placez les codes suivants, qui représente les trois boites modales , et les boutons.
Toujours pareil, ces formulaires seront à modifier selon votre table de votre base de données.

            <div class="toolc"><button type="button" class="btn" id="test">Reset</button></div>
            <div class="toolb"><button id="create-user">Ajouter un employés</button></div>
        <div id="dialog-form" title="Ajouter un employes" style="display:none;">
            <ul id="mess"></ul>
            <form id="formajax" name="formajax" action="" method="post">
            <fieldset>
                <label for="mat">Matricule :</label>
                <input type="text" name="mat" id="mat" placeholder="Saisir un matricule" />
                
                <label for="nom">Nom :</label>
                <input type="text" name="nom" id="nom" placeholder="Saisir un nom" />
    
                <label for="poste">Poste :</label>
                <select name="poste" id="poste" />
                    <option value="">Choisir un poste</option>
                    <option value="PROGRAMMEUR">Programmeur</option>
                    <option value="CHEF SERVICE">Chef de service</option>
                    <option value="ANALYSTE">Analyste</option>
                    <option value="OPERATEUR">Opérateur</option>
                    <option value="CONCEPTEUR">Concepteur</option>
                    <option value="COMPTABLE">Comptable</option>
                    <option value="DIR, GENERAL">DIR, Général</option>
                    <option value="DIR. ADJOINT">DIR. Adjoint</option>
                </select>
                <br /><br />
                <label for="srv">Service :</label>
                <select name="srv" id="srv" />
                    <option value="">Choisir un service</option>
                    <option value="D21">D21</option>
                    <option value="D11">D11</option>
                    <option value="D01">D01</option>
                    <option value="C01">C01</option>
                    <option value="B01">B01</option>
                    <option value="A00">A00</option>
                    <option value="E01">E01</option>
                    <option value="E11">E11</option>
                </select>
                <br /><br />
                <label for="dat">Date :</label>
                <input type="text" id="idDateFR" name="DateFR" value="" placeholder="Selection date" />
                <input type="hidden" name="dat" id="dat" />
                
                <label for="membre">Membre :</label>
                <input type="text" name="membre" id="membre" placeholder="Statut membre" />
            </fieldset>
            </form>
        </div>
    
     <div id="edit_dialog">
          <form action="crud_edit.php" method="post">
          <fieldset>
           <label for="id">Edition de l'employé N° </label>
           <input type="text" name="id" />
           <label for="matricule">Matricule :</label> 
           <input type="text" name="matricule" size="32" />
           <label for="nom">Nom :</label>
           <input type="text" name="nom" size="32" />
           <label for="service">Service :</label>
           <input type="text" name="service" size="32" />
           <label for="poste">Poste :</label>
           <input type="text" name="poste" size="32" />
           <label for="dat">Date :</label>
           <input type="text" name="edat" id="edat" />
           <label for="dat">Modifier la Date :</label>
          <input type="text" id="DateFR" name="DateFR" size="10" value="" />
           <label for="Membre">Membre :</label>
           <input type="text" name="membre" size="3" />
           </fieldset>
          </form>
     </div>
         
               
    <div id="dialog_delete_user" style="display:none;">
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    </div>
        

Fichier (pdo.php)

Ce fichier permet la connection à votre base de données, qui sera à compléter par vos identifiants.

          <?php
              // Connexion à la base
              try {
                  $strConnection = 'mysql:host=localhost;dbname=NOM-DB'; //Ligne 1
                  $arrExtraParam= array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"); //Ligne 2
                  $PDO = new PDO($strConnection, 'root', 'MDP', $arrExtraParam); //Ligne 3; Instancie la connexion
                  $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//Ligne 4
              }
              catch(PDOException $e) {
                  $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
                  die($msg);
              }
          ?>        
        

Fichier (crud_ajout.php)

Ce fichier permet l'insertion d'un enregistrement dans la base de données.

Ce fichier devra être modifié par rapport à votre table de votre base de données.

          <?php
          require_once('pdo.php');
          
          if(isset($_POST['mat']) && isset($_POST['nom']) && isset($_POST['srv']) && isset($_POST['poste']) && isset($_POST['dat']) && isset($_POST['membre']))
          {
          
          $tab = array(
          
                ':mat' => $_POST['mat'],
                ':nom' => $_POST['nom'],
                ':srv' => $_POST['srv'],
                ':poste' => $_POST['poste'],
                ':dat' => $_POST['dat'],
                ':membre' => $_POST['membre']
          );
          
          $sql = "INSERT INTO employes(MAT, NOM, SRV, POSTE, DAT, MEMBRE) values (:mat, :nom, :srv, :poste, :dat, :membre)";
          $reqsql = $PDO->prepare($sql);
          $result = $reqsql->execute($tab);
          
          
          $query = "SELECT * FROM employes ORDER BY ID DESC";
          $reqquery = $PDO->prepare($query);
          $reqquery->execute();
          
          $row = $reqquery->fetch(PDO::FETCH_ASSOC);
          
                  $value = array();
                  
                  if($row)
                  {
                      $value['MAT'] = $row['MAT'];
                      $value['NOM'] = $row['NOM'];
                      $value['SRV'] = $row['SRV'];
                      $value['POSTE'] = $row['POSTE'];
                      $value['DAT'] = $row['DAT'];
                      $value['MEMBRE'] = $row['MEMBRE'];
                  }
                  
                  echo json_encode($value);
          }
          ?>
        
        

Fichier (crud_edit.php

Ce fichier permet d'effectuer la mise à jour dans la base de données

Ce fichier devra être modifié par rapport à votre table de votre base de données.

          <?php
          require_once('pdo.php');
          
          $id = $_POST['id'];
          $matricule = $_POST['matricule'];
          $nom = $_POST['nom'];
          $service = $_POST['service'];
          $poste = $_POST['poste'];
          $dat = $_POST['edat'];
          $membre = $_POST['membre'];
          
          //update database
          try
          {
                $query = "UPDATE employes SET MAT='".$matricule."', NOM='".$nom."', SRV='".$service."', POSTE='".$poste."', DAT='".$dat."', MEMBRE='".$membre."' WHERE ID='".$id."' ";
                $update = $PDO->exec($query);
          }
          catch(PDOException $e) {
              $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
              die($msg);
          }
          
          //generate json code
          echo json_encode(array(
           'id'=>$id,
           'matricule'=>$matricule,
           'nom'=>$nom,
           'service'=>$service,
           'poste'=>$poste,
           'date'=>$dat,
           'membre'=>$membre
          ));
          ?>
        

fichier (crud_delete.php

Ce fichier permet la suppression dans la base de données.

Ce fichier devra être modifié par rapport à votre table de votre base de données.

          <?php
          require_once('pdo.php');
          $id = $_GET['user_id'];
          try {
              $sql = "DELETE FROM employes WHERE ID = :id";
              $query = $PDO->prepare($sql);
              $query->bindParam(':id', $id, PDO::PARAM_INT);
              $query->execute();
              header("location: index.php");
          } catch (PDOException $e) {
              echo 'PDOException : '.  $e->getMessage();
          }
          ?>        
        

Conclusion

Cette application CRUD avec JQuery est fonctionnelle, pour l'avoir testé plusieurs fois, toutefois, modifier tous ces scripts à l'une de votre table représente pas mal de travail.

Bon dev