Question

我有一个数据表，在每一行中都有一个删除按钮。在单击“删除”时，我正在进行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); 
                    },

请帮助

Answer 1

在成功回调ajax时添加此行

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

Answer 2

原因是AJAX成功回调中的this指向XHR对象，因此您可以在成功回调之外分配const tr = table.row($(this).closest('tr'))，然后在成功删除服务器端时执行tr.remove().draw()。 / p>

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

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

2 个答案: