我如何从UI中的数据表中删除行，尽管我可以使用Ajax调用从服务器中成功删除 [英] how can I delete the row from datatable in UI,though i could successfully delete from server using Ajax call

问题描述

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

I have a data table and in each row I have a button Delete. ON click of Delete i am making an ajax call and deleting the row from server by passing the id.

但是成功执行ajax调用后，该行不会从UI中删除到表中.

But on success of ajax call the row is not getting deleted in the table from UI.

在代码下面.

我已经为删除"创建了列

I have rendered the column for Delete

{
                 "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); 
                    },

请帮助

推荐答案

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

The reason is that this within AJAX success callback refers to XHR object, so you may assign const tr = table.row($(this).closest('tr')) outside of success callback and then do tr.remove().draw() upon successful deletion server-side.

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

p.s. also, note that I have used closest('tr') rather than parents('tr') as it is less error prone, since the latter may return array if your button happen to have multiple <tr> parents

这篇关于我如何从UI中的数据表中删除行，尽管我可以使用Ajax调用从服务器中成功删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！