如何从 UI 中的数据表中删除行，尽管我可以使用 Ajax 调用成功地从服务器中删除答案

【问题标题】：how can I delete the row from datatable in UI,though i could successfully delete from server using Ajax call如何从 UI 中的数据表中删除行，尽管我可以使用 Ajax 调用成功地从服务器中删除
【发布时间】：2019-05-07 05:12:23
【问题描述】：

我有一个数据表，每一行都有一个删除按钮。在单击删除时，我正在进行 ajax 调用并通过传递 id 从服务器中删除行。

但是在 ajax 调用成功时，该行不会从 UI 的表中删除。

下面是代码。

我已经渲染了删除列

{
                 "data": "Action","orderable": false, "render": function(data, type, row) {
                     userSignum=readCookie("userSignum");
                    var userIDMGroups=readCookie("nfvDBGroups");
                    var userIDMGroupsArray=userIDMGroups.split(';')
                    if((jQuery.inArray(userIDMGroups,userIDMGroupsArray ) !== -1)&&(row['signumId'] == userSignum) )
                    {
                        return '<button  class="btn btn-action deleterecord" id="'+row.id+'">Delete</button>'
                    }
                    else
                    {
                        return '<button  class="btn btn-action deleterecord" id="'+row.id+'" disabled="disabled">Delete</button>'}
                    }          

             }

下面是ajax调用

 $("#searchTable tbody").on("click", ".deleterecord", function () {
         var table = $('#searchTable').DataTable();    
        var recordId=$(this).attr("id");  
          // var $row = $(this);
           if(recordId!=null){
               $.ajax({
                    type: 'POST',
                    url: config.vnfURL + 'vnf/delete',
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",                 
                    data : JSON.stringify({"id" : recordId }),
                    processData: false,
                    success: function(response, textStatus, jqXHR) {
                        // table.row( $(this).parents('tr') ).remove().draw();
                        //$(recordId).remove(); 
                        table.row($(this).parents('tr')).remove().draw(false);
                         alert("record deleted");
                         if(jqXHR.status == "200"){
                             className = "alert-success";
                             msg = "Record has been deleted Successfully.";
                      } else {
                             className = "alert-danger";
                             msg = "Something wrong, please try again after sometime.";
                      }
                      $("#infoDiv").addClass(className).show();
                      $("#infoDiv>center>p").html(msg);
                      setTimeout(function() { 
                             $("#infoDiv").removeClass(className).hide();
                             $("#infoDiv>center>p").html("");
                            // window.location = "/resources/search.html";
                      }, 7000); 
                    },

请帮忙

【问题讨论】：

从数据库中获取刷新数据并再次绑定更新数据
我不想再去 DB 来回一趟，有没有其他办法
table.row( $(this).parents('tr') ).remove().draw();在成功回调 ajax 时添加这一行。

标签： javascript jquery datatables

【解决方案1】：

原因是AJAX成功回调中的this指的是XHR对象，所以你可以在成功回调之外赋值const tr = table.row($(this).closest('tr'))，然后在服务器端删除成功后执行tr.remove().draw()。

p.s. 另外，请注意我使用了 closest('tr') 而不是 parents('tr')，因为它不太容易出错，因为如果您的按钮碰巧有多个 <tr> 父母，后者可能会返回数组

【讨论】：

【解决方案2】：

在ajax成功回调时添加这一行

table.row( $(this).parents('tr') ).remove().draw();

【讨论】：