jQuery Datatable單元格不更新

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

我記錄了細胞的前值我更新該單元格值，然後更改單元格值，然後記錄新的/更新的單元格值。

下面是我收到的控制檯：

但該表沒有更新，或者更確切地說..重繪本身顯示已刪除..它顯示已刪除的唯一方法是刷新頁面，打敗阿賈克斯的目的..

如何獲得表格更新單元格值，而不刷新頁面？

任何幫助表示讚賞。

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

這個工作，併成功地提請表與更新的值。