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