在2个jQuery数据表之间复制一行，然后更新我的数据库

Question

我已经有一部分工作使用Jquery-Ui了，我会很感激一些进一步的输入。

我可以将Table1中的一行拖放到Table2上。

发出

当我把新行，但它出现在表2，但表2倒塌出于某种原因，我必须将它扩大到看到新行 表1的样子，除去行，但如果您使用它重新出现的订单箭头。 - 此问题已得到修复

其他问题... 我想通过Ajax调用将数据推的这个新行插入我的数据库......我应该尝试在的结束发送数据table2.droppable函数还是应该使用table2中的一些数据函数来实现有新数据然后触发？

<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

如下我会使用的代码。这将允许您处理在将数据插入数据库的过程中可能发生的任何异常。

   
 

 
      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); 
 
       
 
      }