jQuery数据表未刷新

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

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