javascript - 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 个条目，如下所示：

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

我究竟做错了什么？

任何帮助表示赞赏。

标签： javascriptjqueryajaxdatatables

Answer 1

我想通了。在我的成功功能中，我这样做了：

success: function() {

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

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

这正确刷新了表格。把这个留在这里，以防有人遇到同样的问题。