在 ASP.NET 中删除带有 ajax 的行后不显示更新的 DataTable MVC 需要重新加载页面

Question

I have a DataTable to display the book data. After clicking the delete button, the book record is successfully deleted from the database. However, I have to reload the page for the updated the DataTable.

How can I delete the row in UI?

View:

<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 call: I don't want to use location.reload(); to reload the page

$(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

Can you try this? I can't try it my self.

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