如何通過jQuery數據表刪除記錄

Question

我正在使用複選框的數據表。我需要實現一個功能，通過選中某個複選框並單擊刪除按鈕來刪除一行。數據表在服務器端實現。每當用戶選擇一行並單擊刪除按鈕時，他需要能夠直觀地看到該行被刪除。我不明白如何做到這一點。我試圖使用fnDraw（），但不明白它是如何工作的。任何幫助，高度讚賞。這就是我通過數據表進行服務器端Ajax調用的方式。

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

你或許可以用「CreatedRow」回調或「fnCreatedRow」（fnCreatedRow是舊的API，我想你可以使用它們。DataTable的文檔非常混亂）。在這個回調中，找到你的刪除按鈕，併爲它分配click事件處理程序，它將調用數據表插件的remove（）方法。以下是示例代碼。

這裏是鏈接，刪除方法的文檔：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(); 
       }); 
     })