javascript - jQuery 数据表单元格不更新

Question

我有一个正在使用的表 jQuery Datatables与。

图片:

场景:

如图所示，有一个Delete 链接。单击该链接时，将显示一个模态弹出窗口，询问用户是否真的要删除该项目。如果是，删除..如果不是..退出模态。

我想要的:

当用户决定删除一个项目并确认它时..我想通过ajax将该项目的状态更改为“已删除”。我可以更改该值，但该值未显示在表中。我有 researched这已经有几天了，但似乎没有任何效果。

我的代码

<table id="Item-Table" class="table table-bordered">
    <thead>
    <tr>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.AssetTag)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.codeMakeModel.MakeModel)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.codeStatu.Status)
        </th>
        <th></th>
    </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr class="text-center">
                <td>
                    @Html.ActionLink(item.AssetTag, "Edit", new { id = item.Id })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.codeMakeModel.MakeModel)
                </td>
                <td class="changeStatus">
                    @Html.DisplayFor(modelItem => item.codeStatu.Status)
                </td>
                <td>
                    <a href="#" class="js-item-delete text-danger" data-item-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

@section scripts{
    <script>

        var settings = {};
        settings.baseUri = '@Request.ApplicationPath';
        var infoGetUrl = "";
        if (settings.baseUri === "/projectonservername") {
            infoGetUrl = settings.baseUri + "/api/itemsapi/";
        } else {
            infoGetUrl = settings.baseUri + "api/itemsapi/";
        }
        $(document).ready(function () {

            var itemsTable = $("#Item-Table").DataTable({
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [3] },
                    { "bSearchable": false, "aTargets": [3] }
                ]
            });

            $("#Item-Table").on("click",
                ".js-item-delete",
                function() {
                    var link = $(this);

                    bootbox.confirm({
                        title: "Delete Item?",
                        message: "Are you sure you want to delete this item?",
                        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: 5000
                                }

                                $.ajax({
                                    url: infoGetUrl + link.data("item-id"),
                                    method: "DELETE",
                                    success: function (result) {
                                        //itemsTable.cell(itemsTable.row(this), 2).data("Deleted");
                                        //itemsTable.draw();
                                        //itemsTable.reload();
                                        console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());

                                        itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data("Deleted").draw();

                                        console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());

                                        toastr.success("Item successfully deleted");
                                    },
                                    error: function(jqXHR, textStatus, errorThrown) {
                                        var status = capitalizeFirstLetter(textStatus);
                                        console.log(jqXHR);
                                        toastr.error(status + " - " + errorThrown, "Sorry, something went wrong.");
                                    }
                                });
                            }
                        }
                    });
                });

            function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
        })
    </script>
}

我收到了什么

在上面的代码中，特别是这些行:

console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());

itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data("Deleted").draw();

console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());

我在更新单元格值之前记录单元格的值，然后更改单元格值，然后记录新的/更新的单元格值。

这是我在控制台中收到的内容:

但表格没有更新，或者更确切地说..重绘自身以显示已删除..它显示已删除的唯一方法是刷新页面，这违背了 ajax 的目的..

如何在不刷新页面的情况下让表格更新单元格值？

感谢任何帮助。

Answer 1

在评论中的 DavidDomain 的帮助下，我能够自己回答这个问题。

他建议我可能选择了错误的行。所以这给了我一个想法，通过添加以下内容来获取 row 开头:

$("#Item-Table").on("click",
    ".js-item-delete",
    function() {
        var link = $(this);
        var row = $(this).parents("tr"); // get row element

然后像这样使用该变量设置单元格数据:

itemsTable.cell(itemsTable.row(row), $('.changeStatus')).data("Deleted").draw();

这行得通并成功绘制了具有更新值的表格。