? DataTable 1.10.x Drag And Drop

Datatables Drag And Drop MySQL


Drag And Drop des lignes du tableau

Dans un tableau DataTables vous avez surement vu que l'on pouvait déplacer à la souris certaines lignes du tableau.
Toutefois, les scripts que j'ai déjà testé ne permettent pas de sauvegarder la position de la ligne déplacée.
Ce ne sera pas le cas avec le script que je vous propose.

Vous pourrez utiliser ce système avec n'importe qu'elle table MySQL.
Cependant, il faudra ajouter une colonne supplémentaire que l'on nommera (listingid).
C'est cette colonne qui sera mise à jour lors des déplacements des lignes, mais en aucun la colonne (id) sera modifiée.

Concernant la structure du tableau elle ne change pas.
Sauf qu'il faut modifier la balise (tr) du (tbody) comme ceci ( <tr id="recordsArray_<?php echo $datas['ID'];?>"> ).
Puis éventuellement ajouter une colonne supplémentaire à votre tableau ( <td><?php echo $datas['listingid']; ?></td> ), afin de voir les numéros mis à jour.


Script JavaScript

Le script ci-dessous est assez parlant, notamment par l'ajout de commentaire, sauf qu'il y a l'ajout après la fonction (DataTable) d'une fonction de déplacement des lignes du tableau.

              <script type="text/javascript" class="init">
                $(document).ready(function() {
                  $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
                  oTable = $('#menuTable').DataTable( {
                      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
                      "order": [[ 7, "asc" ]],//les colonnes parte de 0 à x
                      //on dit que la colonne 0 sera desc, si vous omettez ce parametre les données s'afficheront asc
                      //même si dans la requete SQL vous spécifiez un order by desc
                      //permet de cacher la colonne 0 soit id
                      "columnDefs": [
                          {
                              "targets": [ 0 ],//on spécifie le numéro de colonne
                              "visible": true,//on spécifie quelle sera cachée
                              "searchable": false//on spécifie quelle ne sera pas utilisée pour la recherche
                          }
                      ],
                      "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.9/i18n/French.json"}, //fichier CDN
                      //"language": { "Url": "../js/fr_FR.txt" }, fichier local
                      "fnDrawCallback": function() {
                          $(this).show();
                          $('div#loader').hide();
                          $(this).show().css('width', '100%');
                      },
                      "initComplete": function () {
                          var api = this.api();
                          api.$('td.api').click( function () {
                              api.search( this.innerHTML ).draw();
                          } );
                      }
                  } );//fin datatable  contentLeft
              
                  $(function() {
                      $("#menuTable tbody").sortable({ opacity: 0.6, cursor: 'move', update: function() {
                          var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
                          $.post("updateDB.php", order, function(theResponse){
                              $("#contentRight").html(theResponse);
                          });                                
                      }                  
                      });
                  });
                  // icone permettant de reloader le tableau
                  $('#click_me').click( function () {        
                      oTable.fnReloadAjax(); 
                  });     
              
                  //script permettant de vider la zone de recherche 
                  $('button.btn').click(function() {
                      $('input[type=search]').val('');
                      oTable.fnFilter('');
                  } );
                  //bouton situé à coté de la zone de recherche pour vider cette zone avec un bouton
                  $("button.btn" ).button({
                      icons: { primary: 'ui-icon-refresh' },
                      text: false
                  });
                  // bouton ou lien de suppression
                  $('a.delete').button({
                      icons: { primary: 'ui-icon-trash'  },
                      text: false
                  });
                  // bouton ou lien d'édition
                  $('a.edit').button({
                      icons: { primary: 'ui-icon-pencil'  },
                      text: false
                  });
                  
               });//fin ready
              </script>
          

Script de la page updateDB.php (Version MySQL)

Ce script sera à modifier selon votre table, en n'oubliant pas de créer le fichier (connexion.php) qui ne contienne que les identifiant à votre base de données..

            <?php 
            require("connexion.php");
            $action         = mysql_real_escape_string($_POST['action']); 
            $updateRecordsArray   = $_POST['recordsArray'];
            
            if ($action == "updateRecordsListings"){
                
                $listingCounter = 1;
                foreach ($updateRecordsArray as $recordIDValue) {
                    
                    $query = "UPDATE employes SET listingid = " . $listingCounter . " WHERE ID = " . $recordIDValue;
                    mysql_query($query) or die('Error, insert query failed');
                    $listingCounter = $listingCounter + 1;  
                }
                
                echo '<pre>';
                print_r($updateRecordsArray);
                echo '</pre>';
                echo 'Si vous actualisez la page, vous verrez que les documents resteront comme vous les avez modifies.';
            }
            ?>
        

Script de la page updateDB.php (Version PDO)

          <?php 
          require('pdo.php');
          $action = $_POST['action'];
          $updateRecordsArray  = $_POST['recordsArray'];
          
          if ($action == "updateRecordsListings"){
              
              $listingCounter = 1;
              foreach ($updateRecordsArray as $recordIDValue) {
                  
                  $query = "UPDATE employes SET listingid = " . $listingCounter . " WHERE ID = " . $recordIDValue;
                  $req = $PDO->prepare($query);
                  $req->execute();
                  $listingCounter = $listingCounter + 1;  
              }
              
              echo '<pre>';
              print_r($updateRecordsArray);
              echo '</pre>';
              echo 'Si vous actualisez la page, vous verrez que les documents resteront comme vous les avez modifies.';
          }
          ?>        
        

 

Création des liens avec les icônes JQuery UI

Voici le code html des liens pour avoir ces liens sous forme d'icônes JQuery UI ( <a class="edit" href="#"></a><a class="delete" href="#"></a> ).

Conclusion

Les scripts ci-dessus, seront utilisable une fois que vous aurez créé correctement la structure de votre tableau et d'y avoir inséré les données dynamiques (champ MySQL).
Restera aussi à définir la colonne de votre tableau contenant les (idlisting) et de penser à modifer ( "order": [[ 7, "asc" ]],//les colonnes parte de 0 à x ).

Bon dev.