Как я могу удалить строку из Datatable в пользовательском интерфейсе, хотя я мог успешно удалить с сервера с помощью вызова Ajax

Question

У меня есть таблица данных, и в каждой строке у меня есть кнопка Удалить. После нажатия кнопки «Удалить» я выполняю вызов ajax и удаляю строку с сервера, передавая идентификатор.

Но при успешном вызове ajax строка не удаляется в таблице из пользовательского интерфейса.

Ниже приведен код.

Я обработал столбец для удаления

{
                 "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

Причина в том, что this в успешном обратном вызове AJAX относится к объекту XHR, поэтому вы можете назначить const tr = table.row($(this).closest('tr')) вне успешного обратного вызова, а затем выполнить tr.remove().draw() после успешного удаления на стороне сервера.

ps также обратите внимание, что я использовал closest('tr') вместо parents('tr'), так как он менее подвержен ошибкам, так как последний может вернуть массив, если ваша кнопка имеет несколько <tr>родители

Answer 2

Добавьте эту строку при успешном обратном вызове ajax

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