刷新或重新加载在MVC

Question

这里使用Ajax调用后一个数据表是我的HTML代码：

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Extension File Name</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody id="ExtTableBody"> 
     @foreach (var item in Model.ExtSaved) 
     { 
      <tr> 
       <td>@item.FileName</td> 
       <td><a id="@item.Id" class="remove delete-user-row-with-ajax-button"><i class="icon-remove"></i></a></td> 
      </tr> 
     } 
    </tbody> 
</table> 
<script> 
    $(document).ready(function() { 
     $("table").DataTable(); 
    }); 
</script> 

还有的脚本：

<script> 
    $(document).ready(function() { 
     $("table").DataTable(); 
    }); 
</script> 

<script> 
    $("a.delete-user-row-with-ajax-button").bootstrap_confirm_delete({ 

     callback: function (e) { 

      var button = e.data.originalObject; 
      var Id = button.attr('id'); 
      $.ajax({ 
       type: "POST", 
       datatype: "application/json", 
       url: "/UploadFile/Remove", 
       data: { Id: Id }, 
       success: function (data) { 
        if (data.UpdateDB == true) { 
         if (data.success > 0) { 
          button.closest('tr').remove();         
          $('#ExtSuccessText3').text("Extension File Removed Successufully.").removeClass("errormsg").addClass("successmsg"); 
         } 
        } 
       } 
      }); 
     } 
    }); 
</script> 

我的行动：

 [HttpPost] 
     public ActionResult Remove(string Id) 
     { 
      int success = 1; 
      ED.DELETEEXTENSIONBYID(Id); 
      TempData["Message"] = "Extension successufully removed."; 
      return Json(new { UpdateDB = true, success = success }, JsonRequestBehavior.AllowGet); 
     } 

当打开页面：

enter image description here

删除行后：

The row will be deleted because of this line "button.closest('tr').remove();", but the datatable plugin didn't change "Showing 1 To 4 Of 4 Entries" to 3 of 3 entries, and when I choose from show entries to 25 or anything the row That I just deleted will be returned again

所以我不知道我必须做准确。

Answer 1

你需要从数据表中删除行：

<script> 
    var table //add an global variable 
    $(document).ready(function() { 
     table = $("table").DataTable(); 
    }); 
</script> 

<script> 
    $("a.delete-user-row-with-ajax-button").bootstrap_confirm_delete({ 

     callback: function (e) { 

      var button = e.data.originalObject; 
      var Id = button.attr('id'); 
      $.ajax({ 
       type: "POST", 
       datatype: "application/json", 
       url: "/UploadFile/Remove", 
       data: { Id: Id }, 
       success: function (data) { 
        if (data.UpdateDB == true) { 
         if (data.success > 0) { 
          //remove the row from datatable 
          table.row(button.closest('tr')) 
           .remove() 
           .draw();         
          $('#ExtSuccessText3').text("Extension File Removed Successufully.").removeClass("errormsg").addClass("successmsg"); 
         } 
        } 
       } 
      }); 
     } 
    }); 
</script> 

Answer 2

从笨

//add this at the top of your page 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 

//assign a variable on your datatable 
var dataTable; 
$(document).ready(function() { 
    dataTable = $('#manufacturer_data').DataTable({ 
     "ajax": "<?=base_url()?>manufacturer/manufacturer_list", 
    });  
}); 

success: function(){ 
    //if your ajax call is success call the dataTable variable to make it reload 
    dataTable.ajax.reload(null, false); 
} 

//add this at the bottom of your page 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>