Question

我有一张表格，我正在使用jQuery Datatables。

图片：

情境：

正如您在图片中看到的，有一个Delete链接。单击该链接时，将显示一个模式弹出窗口，询问用户是否确实要删除该项目。如果是，则删除..如果否..取消模态。

我想要的是什么：

当用户决定删除某个项目并确认它时...我想通过ajax将该项目的状态更改为＆＃34; Deleted＆＃34;。我可以更改值，但该值不会显示在表中。我现在有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();

这项工作成功地绘制了具有更新值的表格。

jQuery Datatable单元格未更新

1 个答案: