jQuery Datatable cell not updating

Question

I have a table that I am using jQuery Datatables with.

Picture:

Scenario:

As you can see in the picture, there is a Delete link. When that link is clicked, a modal pop-up will show asking the user if they really want to delete that item. If yes, delete.. if no.. cancel out of the modal.

What I want:

When a user decides to delete an item and confirms it.. I would like to change the status of that item to "Deleted", via ajax. I am able to change the value, but that value does not show in the table. I have researched this for a couple of days now, but nothing seems to work.

My Code

<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>
}

What I am Receiving

In the above code, specifically these lines:

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

I am logging the value of the cell before I update that cell value, then changing the cell value, then logging the new/updated cell value.

Here is what I am receiving in the console:

But the table is not updating, or rather.. redrawing itself to show deleted.. the only way for it show deleted is to refresh the page which defeats the purpose of ajax..

How do I get the table to update the cell value without a page refresh?

Any help is appreciated.

Answer 1

I was able to answer this myself with some help of DavidDomain in the comments.

He suggested that I could possibly be selecting an incorrect row. So that gave me the idea to get the row at the start of this by adding:

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

Then set the cell data using that variable like so:

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

This worked and successfully drew the table with the updated value.