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

Question

我有 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 width="10px">#</th>
                <th>Bagian</th>
                <th width="90px">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="row_@item.JabatanId">
                        <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>

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

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

Answer 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();
        }

会成功的。

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

Answer 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();
        }
    });
}