Question

在我看来，我有一张桌子，看起来像这样：

我将AJAX与“删除链接”一起使用，以便表可以刷新而无需刷新整个页面，因此，一旦用户单击“删除”，将出现一个对话框，如下所示：

点击“确认”按钮后，我们进入jQuery / Ajax：

weighLocationTable.on("click",
    ".js-delete-teu-weighLocation",
    function() {
        var link = $(this);
        var row = $(this).parents("tr");
        var teuId = $(this).data("teu-id");
        var weighLocId = $(this).data("teu-wl-id");
        var personnelIbm = $("#PersonnelIBM").val();

        var allTables = $(".teu-edit-tbl");
        var rowCount = allTables.DataTable().rows().count();
        console.log(rowCount);
        var rowCountMinusOne = rowCount - 1;
        console.log("Total Rows In Every Table on Page Minus One: " + rowCountMinusOne);

        var countThisTableRows = $("#Teu-Edit-Weigh-Location-Tbl").DataTable().rows().count();
        console.log("Total Rows In Weigh Location Table: ", countThisTableRows);
        var thisTableRowMinusOne = countThisTableRows - 1;
        console.log("Total Rows In Weigh Location Table Minus One: ", thisTableRowMinusOne);

        /* 

            If the user who is deleting rows deletes the only one left.. then it should delete the entire TEU record because
            there are zero rows associated with it.  Else just delete the maneuver.

        */

        if (rowCountMinusOne === 0) {
            bootbox.confirm({
                title: "Delete Entire TEU Record?",
                message:
                    "Because this is the last category for this record, deleting this row will result in the entire record being deleted.  " +
                        "Are you sure you want to delete this entire TEU Record?  ",
                buttons: {
                    cancel: {
                        label: "<i class='fa fa-times'></i> Cancel"
                    },
                    confirm: {
                        label: "<i class='fa fa-check'></i> Confirm"
                    }
                },
                callback: function(result) {
                    if (result) {
                        toastr.options = {
                            timeOut: 3000
                        }

                        $.ajax({
                            url: deleteEntireRecordUrl + teuId,
                            method: "DELETE",
                            beforeSend: disableSendButton(),
                            success: function() {
                                var thisTable = $("#Teu-Edit-Weigh-Location-Tbl").DataTable();

                                thisTable.row($(this).parents("tr")).remove().draw(false);
                                //row.remove().draw();
                                //row.remove();
                                //$("#Teu-Edit-Weigh-Location-Tbl").DataTable().destroy();
                                //$("#Teu-Edit-Weigh-Location-Tbl").DataTable().draw();

                                toastr.options = {
                                    onHidden: function() {
                                        window.location.href = redirectUrl + personnelIbm;
                                    },
                                    timeOut: 2000
                                }
                                toastr.success("Row successfully deleted.");
                                toastr.success("TEU record successfully deactivated.");
                            }
                        });
                    }
                }
            });
        } else {
            bootbox.confirm({
                title: "Delete Row?",
                message:
                    "Are you sure you want to delete this category with it's count?  This will PERMANENTLY delete this row.",
                buttons: {
                    cancel: {
                        label: "<i class='fa fa-times'></i> Cancel"
                    },
                    confirm: {
                        label: "<i class='fa fa-check'></i> Confirm"
                    }
                },
                callback: function(result) {
                    if (result) {
                        toastr.options = {
                            timeOut: 3000
                        }

                        $.ajax({
                            url: deleteOneRowUrl + teuId + "/" + weighLocId,
                            method: "DELETE",
                            success: function() {

                                var thisTable = $("#Teu-Edit-Weigh-Location-Tbl").DataTable();

                                thisTable.row($(this).parents("tr")).remove().draw(false);

                                //row.remove().draw();
                                //row.remove();
                                //$("#Teu-Edit-Weigh-Location-Tbl").DataTable().destroy();
                                //$("#Teu-Edit-Weigh-Location-Tbl").DataTable().draw();


                                if (thisTableRowMinusOne === 0) {
                                    weighLocationTable.next().remove();
                                    weighLocationTable.remove();

                                }

                                toastr.success("Row successfully deleted");
                            },
                            error: function(x, y, z) {
                                console.log(x);
                            }
                        });
                    }
                }
            });
        }
    });

如您所见，在我的成功函数中，我尝试了多种尝试来刷新表，因为删除一行后，计数仍然显示2个条目，如下所示：

我需要正确刷新表格，以便只有一个条目。

我在做什么错了？

感谢您的帮助。

Answer 1

我知道了。在我的成功函数中，我这样做：

success: function() {

    var thisTable = $("#Teu-Edit-Weigh-Location-Tbl").DataTable();

    thisTable.row(row).remove().draw();

这样可以正确刷新表格。如果有人遇到相同的问题，请留在这里。

jQuery数据表未刷新

1 个答案: