在 ASP.NET 中刪除帶有 ajax 的行后不顯示更新的 DataTable MVC 需要重新加載頁面

Question

我有一個數據表來顯示圖書數據。 點擊刪除按鈕后，圖書記錄成功從數據庫中刪除。 但是，我必須重新加載更新后的 DataTable 的頁面。

如何刪除 UI 中的行？

看法：

<table class="table table-bordered table-hover" id="books">
    <thead>
        ...
    </thead>
    <tbody>
        @foreach (var book in model)
        {
            <tr>
                <td>@Html.ActionLink(book.Name, "Details", "Books", new { id = book.Id })</td>
                <td>@book.Author</td>
                <td>@book.Type.Type</td>
                <td>@book.NumberInStock</td>
                <td> 
                    //Delete Button
                    <button data-book-id="@book.Id" class="btn btn-danger js-delete book-delete">Delete</button> 
                </td>
            </tr>
        }
    </tbody>
</table>

Ajax 電話：我不想使用location.reload(); 重新加載頁面

$(document).ready(function () {
        var myDataTable = $("#books").DataTable({
            "drawCallback": function (settings) {
                $("#books .book-delete").on("click", function (e) {
                    var button = $(this);
                    var result = confirm('Are you sure you wish to delete this book?');
                    if (result) {
                        var form = $('#__AjaxAntiForgeryForm');
                        var token = $('input[name="__RequestVerificationToken"]', form).val();
                        $.ajax({
                            url: "/Books/Delete/" + button.attr("data-book-id"),
                            method: "POST",
                            data: {
                                __RequestVerificationToken: token,
                                someValue: "Your Custom Secret String"
                            },
                            success: function () {
                                location.reload();
                            },
                            statusCode: {
                                500: function () {
                                }
                            }
                        });
                    }
                });
            }
        });
    });

Answer 1

你能試試這個嗎？ 我不能自己嘗試。

   $(document).ready(function () {
      var myDataTable = $("#books").DataTable({
        "drawCallback": function (settings) {
            $("#books .book-delete").on("click", function (e) {
                var button = $(this);
                var result = confirm('Are you sure you wish to delete this book?');
                if (result) {
                    var form = $('#__AjaxAntiForgeryForm');
                    var token = $('input[name="__RequestVerificationToken"]', form).val();
                    $.ajax({
                        url: "/Books/Delete/" + button.attr("data-book-id"),
                        method: "POST",
                        data: {
                            __RequestVerificationToken: token,
                            someValue: "Your Custom Secret String"
                        }
                    myDataTable.row($(this).parents('tr')).remove().draw();
                   // you can also try this 
                   // $('#books').DataTable().ajax.reload();
                    });
                }
            });
        }
    });
});