Question

这是我的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

您需要从DataTable中删除该行：

<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

从Codeigniter

尝试此示例

//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>

在mvc中使用ajax调用后刷新或重新加载数据表

2 个答案: