Copiez une ligne entre 2 données jquery et puis mettez à jour ma base de données

Question

J'ai déjà une partie de ce travail en utilisant Jquery-Ui, j'apprécierais une autre entrée.

Je suis capable de faire glisser et déposer une ligne de Table1 sur Table2.

émet

Lorsque je laisse tomber la nouvelle ligne, il ne semble sur table2 mais table2 s'effondre pour une raison quelconque et je dois développer pour voir la nouvelle ligne Tableau 1 ressemble à la ligne a été supprimée mais si vous utilisez la flèche Ordre, il réapparaît. - Ce problème a été résolu

Question supplémentaire ... Je souhaite pousser cette nouvelle ligne de données dans ma db via un appel ajax ... dois-je essayer d'envoyer les données à la fin de la fonction table2.droppable ou devrais-je utiliser certaines fonctions de données dans la table2 pour se rendre compte qu'il y a de nouvelles données, puis le feu?

<table class="dataTable" id="table1"> 
     <thead> 
      <tr> 
       <th>Rendering engine</th> 

      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Trident</td> 

      </tr> 
      <tr> 
       <td>Trident</td> 

      </tr> 
      <tr> 
       <td>Trident</td> 

      </tr> 
      <tr> 
       <td>Trident</td> 
      </tr> 

     </tbody> 
    </table> 

    <h2>Table 2</h2> 
    <table class="dataTable" id="table2"> 
     <thead> 
      <tr> 
       <th>Rendering engine</th> 
      </tr> 
     </thead> 

    </table> 

      var t1 = $('#table1').DataTable(); 
      var t2 = $('#table2').DataTable(); 

      //this will hold reference to the tr we have dragged and its helper 
      var c = {}; 

      $("#table1 tr").draggable({ 
       helper: "clone", 
       start: function (event, ui) { 
        c.tr = this; 
        c.helper = ui.helper; 
       } 
      }); 


      $("#table2").droppable({ 
       drop: function (event, ui) { 
        t2.row.add(c.tr).draw(); 

        // <-- Do this if you want to remove the rows from the first table 
        $(c.tr).remove(); 
        $(c.helper).remove(); 

        //Redraw Table1 
        t1.draw(); 
        // --> 
        return false; 
       } 
      }); 

Fiddle

Answer 1

Je voudrais utiliser le code comme suit. Cela vous permettra de gérer les exceptions qui peuvent survenir lors de l'insertion de données dans la base de données.

   
 

 
      var t1 = $('#table1').DataTable(); 
 
      var t2 = $('#table2').DataTable(); 
 

 
      //this will hold reference to the tr we have dragged and its helper 
 
      var c = {}; 
 

 
      $("#table1 tr").draggable({ 
 
       helper: "clone", 
 
       start: function (event, ui) { 
 
        c.tr = this; 
 
        c.helper = ui.helper; 
 
       } 
 
      }); 
 

 

 
      $("#table2").droppable({ 
 
       drop: function (event, ui) {     
 
        
 
        
 
        //Insert the data into my database. 
 
        insertData(function (success) { 
 
        \t if (success) { 
 
         \t  //Move the row. 
 
          t2.row.add(c.tr).draw(); 
 
          $(c.tr).remove(); 
 
         \t  $(c.helper).remove(); 
 
         
 
          //Re-draw the tables. 
 
          t1.draw(); 
 
        \t \t t2.draw(); 
 
         } 
 
         else { 
 
         \t  //Handle a failed insert. 
 
          alert("Unable to insert data!"); 
 
         }   
 
        }); 
 
        
 
        
 
       } 
 
      }); 
 
      
 
      function insertData(cb) { 
 
      \t //Perform some AJAX. 
 
       
 
       //Test a success. 
 
       cb(true); 
 
       
 
       //Test a Failure. 
 
       //cb(false); 
 
       
 
      }