在asp.net mvc中删除数据成功后重新排序自动编号列JQuery Datatable

Posted 2023-05-09

【中文标题】在asp.net mvc中删除数据成功后重新排序自动编号列JQuery Datatable

【英文标题】：Reorder auto number column JQuery Databale after delete data successfull in asp.net mvc

【发布时间】：2018-08-10 14:26:07

【问题描述】：

我有 jquery 函数来在列数据表中给出数字并从删除按钮删除执行。当我尝试删除表中的数据时，它无法再次重新排序。 这是我的问题。

应该从1-4重新排序。 table_id 是我的 id 表。

这是我的html代码：

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="table_id">
        <thead>
            <tr>
                <th >#</th>
                <th>Bagian</th>
                <th >Action</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>#</th>
                <th>Bagian</th>
                <th>Action</th>
            </tr>
        </tfoot>
        <tbody>
            @if (ViewBag.JabatanList != null)
            
                foreach (var item in ViewBag.JabatanList)
                
                    <tr id="[e-mail]">
                        <td></td>
                        <td>@item.NamaJabatan</td>
                        <td>
                            <a href="@Url.Action("CreateEdit","Jabatan",new  Id = item.JabatanId )" class="btn bg-blue waves-effect" title="Ubah"><i class="material-icons">edit</i></a>
                            <a href="#" class="btn bg-red waves-effect" title="Hapus" data-type="confirm" onclick="ConfirmDelete(@item.JabatanId)"><i class="material-icons">delete</i></a>
                        </td>
                    </tr>
                
            
        </tbody>
    </table>
</div>
@*catch JabatanId*@
<input type="hidden" id="hiddenJabatanId" />

这是我的 AJAX 代码：

<script type="text/javascript">
    $(document).ready(function () 
        RowNumber(); //calling row number function
    );

    var RowNumber = function () 
        var table = $('#table_id').DataTable(
            //default show entries
            "aLengthMenu": [[10, 25, 50, 75, 100, -1], [10, 25, 50, 75, 100, "All"]],
            "iDisplayLength": 25,
            //row number
            "columnDefs": [
                "searchable": false,
                "orderable": false,
                "targets": 0
            ]
        );

        table.on('order.dt search.dt', function () 
            table.column(0,  search: 'applied', order: 'applied' ).nodes().each(function (cell, i) 
                cell.innerHTML = i + 1;
            );
        ).draw();
    

    var ConfirmDelete = function (JabatanId) 
        $("#hiddenJabatanId").val(JabatanId); //passing value JabatanId
    

    var DeleteBagian = function () 

        var bgnId = $("#hiddenBagianId").val();
        //debugger
        $.ajax(

            type: "POST",
            url: "/Bagian/Delete",
            data:  Id: bgnId ,
            success: function (result) 
                $("#row_" + bgnId).remove(); //after remove row that succesfull delete, will re-order auto number again
                $(document).ready(); //here i call document ready in order to reorder auto number
            
        );

    
</script>

我尝试了几种方法来做到这一点，我尝试调用

对此案有任何建议，我将不胜感激。

【问题讨论】：

你能发布你所有的html吗？使用操作按钮？

@AkshayKriti 我为上面的 html 代码添加了

你试过我的解决方案了吗？我希望这会奏效。

【参考方案1】：

使用与上面相同的 html 结构：

为了渲染表格，使用下面的 sn-p：

fnRowCallback 是搜索和删除完成时的回调。

文件准备就绪

var table;
$(document).ready(function () 
    RowNumber(); //calling row number function
);

行号()

var RowNumber = function () 

    table = $('#table_id').DataTable(
        //default show entries
        "aLengthMenu": [[10, 25, 50, 75, 100, -1], [10, 25, 50, 75, 100, "All"]],
        "iDisplayLength": 25,
        //row number
        "columnDefs": [
            "searchable": false,
            "orderable": false,
            "targets": 0
        ],
        "fnRowCallback": function (nRow, aData, iDisplayIndex) 
            debugger
            var oSettings = this.fnSettings();
            $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
            return nRow;
        
    );

DeleteBagain()

var DeleteBagian = function () 
    var bgnId = $("#hiddenBagianId").val();
    $.ajax(
        type: "POST",
        url: "/Bagian/Delete",
        data:  Id: JabatanId ,
        success: function (result) 
            table.row('#row_' + bgnId).remove().draw();
        
    );

对于错误datatable cannot reinitialise datatable。

在 ajax 删除成功后改变你的逻辑来实现这个。

success: function (result) 
           table.row('#row_' + bgnId).remove().draw();
        

会成功的。

请尝试告诉我。我希望这会有所帮助！

【讨论】：

我已经为我从html设置的btnDelete添加的html代码，它不是来自AJAX

我在删除按钮中添加了 onclick 事件，并使用 ConfirmDelete() 函数从 AJAX 调用它

效果很好。只需将全局变量声明为table 并在DeleteBagian() 中再次调用它。代码就像你上面的建议table.row('#row_' + bgnId).remove().draw();

【参考方案2】：

您不能手动拨打$(document).ready()；它仅在页面加载时运行。详情可参考Can I call $(document).ready() to re-activate all on load event handlers?。

但是，您应该能够在 ajax 成功中调用 RowNumber 函数。

var DeleteBagian = function () 
    var bgnId = $("#hiddenBagianId").val();

    $.ajax(
        type: "POST",
        url: "/Bagian/Delete",
        data:  Id: bgnId ,
        success: function (result) 
            $("#row_" + bgnId).remove(); //after remove row that succesfull delete, will re-order auto number again
            RowNumber();
        
    );

【讨论】：

它不起作用，因为我需要显示行自动编号$(document).ready()。当我在DeleteBagian 函数之后调用RowNumber(); 函数时，它会显示错误数据表无法重新初始化数据表