Question

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

应该从1-4再次排序。 table_id 是我的ID表。

这是myHTML代码：

<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结构与上面的相同：

要渲染表格，请使用以下代码段：

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

准备好文件

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

<强> ROWNUMBER（）

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

对于错误数据表无法重新初始化数据表。

更改逻辑以在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();
        }
    });
}

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

2 个答案: