如何通过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(); 
       }); 
     })