删除行后刷新Jquery数据表

Posted 2023-05-07

【中文标题】删除行后刷新Jquery数据表

【英文标题】：Refresh Jquery datatable after deleting a row

【发布时间】：2017-06-28 01:18:46

【问题描述】：

我有一个显示来自表（角色）的数据的数据表，我使用 ajax 调用来删除一行：

 function OnDeleteClick(el) 
    
        //var url = ($(this).attr('href'));
        //alert(url);
        //var employeeId = event.getAttribute(id); //e.target.id
        //var url = ($(this).attr('id'));      
        var id = $(el).attr('id');       
        var roleid = getURLParameter(id, 'id');        
        var username = getURLParameter(id, 'name');        
        var flag = confirm('You are about to delete Role ' + username + ' permanently.Are you sure you want to delete this record?');

        if (flag)  
            $.ajax( 
                url: '/Role/DeleteAJAX', 
                type: 'POST', 
                data:  roleId: roleid ,
                dataType: 'json', 
                //success: function (result)  alert(result); $("#" + Name).parent().parent().remove(); ,
                success: function (result) 
                    alert(result); 
                ,
                error: function ()  alert('Error!');  
            ); 
         
        return false; 
    

我的问题是删除成功后如何刷新jquery数据表，这样被删除的行也会从数据表中删除？

下面是我用来构建我的 JQuery 数据表的代码：

<div class="row" >
    <fieldset class="col-md-10 col-md-offset-1" >
        <legend>Liste des rôles </legend>
        <div class="table-responsive" style="overflow-x: hidden;">
            <table  class="table table-bordered table-hover" id="dataTables-example">
                <thead>
                    <tr>
                        <th>Designation Role</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    
                        <tr>
                            <td>
                                @item.Name
                            </td>
                            <td >                                
                                <a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',false)" title="consulter">
                                    <i class="fa fa-folder-open-o"></i>
                                </a>
                                <a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',true)" title="Editer">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <a class="btn btn-custom btn-xs" onclick="OnDeleteClick(this);" id="#?id=@item.Id&name=@item.Name" title=" supprimer">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </td>
                        </tr>
                    
                </tbody>
            </table>
        </div>
        <div class="b-right">
            <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create", "Role")'">
                <i class="fa fa-plus"></i> Ajouter un role
            </button>
        </div>        
    </fieldset>
</div>

感谢您的帮助。

【问题讨论】：

这是一个 html 表格并且您使用的是 jquery 吗？或者你在使用 DataTables datatables.net？

这是一个 Jquery 数据表，而不是一个简单的 html 表。

你能展示一下你的表是如何构建的代码吗？

【参考方案1】：

如果您使用 DataTables.net 并且使用 AJAX 数据源构建了这样的表：

var myTable = $("#myTable").DataTable( ajax: "path/to/my/data" );

你可以这样刷新表中的数据：

$.ajax( 
    <your deleting code>
    success: function() 
        myTable.ajax.reload();
    )
);

如果您使用来自 MVC 的视图模型使用 Razor 构建了表，则需要 1) 在成功回调中重新加载页面：

$.ajax( 
    <your deleting code>
    success: function() 
        window.location.reload();
    )
);

或 2) 从 DOM 中删除该行，知道它已经从数据库中删除，以保持 DB 和 UI 同步：

$.ajax( 
    <your deleting code>
    success: function() 
        myTable.row($(el).parents("tr")).remove().draw();
    )
);

【讨论】：

感谢乔的回复，但实际上我并没有像你的帖子那样构建我的数据表，而是使用简单的 asp.net mvc 视图。那么在这种情况下，我该如何刷新数据表？

我已经用 3 个选项更新了答案，用于 XHR 刷新、页面重新加载或 DOM 操作以删除行。