jQuery 데이터 테이블을 통해 레코드를 삭제하는 방법

Question

체크 박스가있는 데이터 테이블을 사용하고 있습니다. 체크 박스를 선택하고 삭제 버튼을 클릭하면 행을 삭제하는 기능을 구현해야합니다. 데이터 테이블은 서버 측에서 구현됩니다. 사용자가 행을 선택하고 삭제 버튼을 클릭 할 때마다 행이 삭제 된 것을 시각적으로 볼 수 있어야합니다. 나는 이것을하는 방법을 이해하지 못한다. fnDraw()를 사용하려고하지만 작동 방식을 이해하지 못합니다. 어떤 도움을 주셔서 감사합니다. 이것은 데이터 테이블을 통해 서버 측 아약스 호출을 작성한 방법입니다. 당신은 아마 "CreatedRow"콜백 또는 "fnCreatedRow"를 사용할 수 있습니다

var oTable= $('#example').DataTable({ 
    "processing": true, 
     "serverSide": true, 
     "sPaginationType": "full_numbers", 

      "ajax" : { 
       "url" : BASE_URL +"swethasemail/mail-ajax/get-data-table/format/json/", 
       "dataType": "json" 
      }, 
      "columnDefs": [{ 
         "targets": 0, 
         "orderable": false, 
         "className": "dt-body-center", 
         "render": function(data, type, full, meta){ 
            console.log(data); 
          return '<input class="bbe_bugs_email_multicheck bbe_prevent_default" type="checkbox" />'; 

          }, 

      }], 
      "aoColumns": [ 
          { "sWidth": "5%" }, // 1st column width 
          { "sWidth": "15%" }, // 2nd column width 
          { "sWidth": "20%" }, // 3rd column width and so on 
          {"sWidth": "1%"}, 
          {"sWidth": "3%"}, 
          {"sWidth": "10%"}, 
          {"sWidth": "45%"} 
          ], 
      "order": [], 
      'rowCallback': function(row,data,dataIndex){ 
          var rowId=data[0]; 


       } 
      }); 

Answer 1

은 (fnCreatedRow 이전 API를, 난 당신이 그들 중 하나를 사용할 수 있다고 생각합니다. DataTable의 문서는 정말 혼란). 이 콜백에서 삭제 버튼을 찾아 데이터 테이블 플러그인의 remove() 메소드를 호출 할 click 이벤트 핸들러를 지정하십시오. 아래는 샘플 코드입니다. 여기

제거 방법의 문서에 대한 링크입니다 : https://datatables.net/reference/api/row().remove()

var oTable= $('#example').DataTable({ 
      "processing": true, 
    "serverSide": true, 
    "sPaginationType": "full_numbers", 

     "ajax" : { 
      "url" : BASE_URL +"swethasemail/mail-ajax/get-data-table/format/json/", 
      "dataType": "json" 
     }, 
     "columnDefs": [{ 
        "targets": 0, 
        "orderable": false, 
        "className": "dt-body-center", 
        "render": function(data, type, full, meta){ 
           console.log(data); 
         return '<input class="bbe_bugs_email_multicheck bbe_prevent_default" type="checkbox" />'; 

         }, 

     }], 
     "aoColumns": [ 
         { "sWidth": "5%" }, // 1st column width 
         { "sWidth": "15%" }, // 2nd column width 
         { "sWidth": "20%" }, // 3rd column width and so on 
         {"sWidth": "1%"}, 
         {"sWidth": "3%"}, 
         {"sWidth": "10%"}, 
         {"sWidth": "45%"} 
         ], 
     "order": [], 
     "fnCreatedRow": function(tr, trData, iDataIndex) { 
      //assuming the first cell in the table has Delete button 
      $(tr.cells[0]).find(":button").on("click", function (e) { 
        $(tr).remove(); 
        oTable.draw(); 
       }); 
     })