javascript - jQuery Datatable cell not updating -

i have table using jquery datatables with.

picture:

scenario:

as can see in picture, there delete link. when link clicked, modal pop-up show asking user if want delete item. if yes, delete.. if no.. cancel out of modal.

what want:

when user decides delete item , confirms it.. change status of item "deleted", via ajax. able change value, value not show in table. have researched couple of days now, nothing seems 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 sure want delete 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 deleted");                                     },                                     error: function(jqxhr, textstatus, errorthrown) {                                         var status = capitalizefirstletter(textstatus);                                         console.log(jqxhr);                                         toastr.error(status + " - " + errorthrown, "sorry, went wrong.");                                     }                                 });                             }                         }                     });                 });              function capitalizefirstletter(string) {                 return string.charat(0).touppercase() + string.slice(1);             }         })     </script> } 

what receiving

in above code, 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 logging value of cell before update cell value, changing cell value, logging new/updated cell value.

here receiving in console:

but table not updating, or rather.. redrawing show deleted.. way show deleted refresh page defeats purpose of ajax..

how table update cell value without page refresh?

any appreciated.

i able answer myself of daviddomain in comments.

he suggested possibly selecting incorrect row. gave me idea row @ start of adding:

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

then set cell data using variable so:

itemstable.cell(itemstable.row(row), $('.changestatus')).data("deleted").draw(); 

this worked , drew table updated value.