jQuery Datatable not refreshing

Question

On my view I have a table, that looks like so:

I am using AJAX with the "Delete links" so that the table could just refresh without an entire page refresh, so that once the user clicks "Delete", a dialog will appear like so:

Once the Confirm button is clicked, we go into the 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: " Cancel"
                    },
                    confirm: {
                        label: " 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: " Cancel"
                    },
                    confirm: {
                        label: " 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);
                            }
                        });
                    }
                }
            });
        }
    });

As you can see, in my success functions I have tried multiple things to try and get the table to refresh, because after a row is deleted the count still says 2 entries like so:

I need the table to refresh properly so that there is only one entry.

What am I doing wrong?

Any help is appreciated.

jQuery Datatable not refreshing

Answers (1)

Related Questions