2 개의 jquery Datatables 사이에 행을 복사 한 다음 내 DB를 업데이트하십시오.

Question

나는 Jquery-Ui를 사용하여이 작업의 일부를 이미 가지고 있습니다.

Table1에서 Table2로 행을 끌어다 놓을 수 있습니다.

는

나는 새 행을 삭제할 때, 표 2에 나타나지 않지만 표 2는 어떤 이유로 붕괴 발행하고 나는 행이 제거 된 것처럼 표가 보이는 새 행을보고 그것을 확장해야하지만 경우 다시 나타나는 주문 화살표를 사용합니다. - 이 문제는 내가 아약스 호출을 통해 내 DB에 데이터의 새로운 행을 추진하고자하는

추가 질문 ... 수정되었습니다 ... 나는 끝에서 데이터를 보내려고한다 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); 
 
       
 
      }