如何通过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，我认为您可以使用它们中的任何一个。数据表文档确实令人困惑）。在此回调中，找到您的删除按钮并为其分配单击事件处理程序，该处理程序将调用数据表插件的 remove() 方法。下面是示例代码。

这里是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();
               });
         })