jquery.dataTablesを使用してobservableArrayからアイテムを削除した後にUIが更新されない

Question

jquery.dataTablesおよびknockout jsを使用して、データをテーブルにバインドしています。

observableArrayからアイテムを削除すると、UIは更新されません。私はjquery.Datatableにデータをバインドするので、テーブルを再初期化することができます。だからTableManaged.init();メソッドを呼び出してテーブルを再初期化しますが、警告cannot reinitialise datatableを生成しています。

以下は私のコードです。ここで

function PatientVM(vm) { 
 
    self.MDSPatientId = ko.observable(vm.MDSPatientId()); 
 
    self.PatientNumber = ko.observable(vm.PatientNumber()); 
 
    self.PrescribingDay = ko.observable(vm.PrescribingDay()); 
 
    self.OneWeekItems = ko.observable(vm.OneWeekItems()); 
 
    self.DeliveryDay = ko.observable(vm.DeliveryDay()); 
 
    self.IsActive = ko.observable(vm.IsActive()); 
 
    self.WeekColor = ko.observable(vm.WeekColor()); 
 
    self.PatientName = ko.observable(vm.PatientName()); 
 
    self.FullAddress = ko.observable(vm.FullAddress()); 
 
} 
 

 
function Patients(vm) { 
 
    var self = this; 
 
    self.PatientList = ko.observableArray(); 
 

 
    if (vm.PatientList() != null) { 
 
    for (i = 0; i < vm.PatientList().length; i++) { 
 
     var p = new PatientVM(vm.PatientList()[i]); 
 
     self.PatientList.push(p); 
 
    } 
 
    } 
 

 
    self.DeletePatient = function(patient) { 
 
    var result = confirm("Want to delete?"); 
 
    if (result) { 
 
     $.ajax({ 
 
     url: '@Url.Action("DeleteMDSPatient", "Patient")', 
 
     cache: false, 
 
     type: 'GET', 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     data: { 
 
      'MDSPatientId': patient.MDSPatientId() 
 
     }, 
 
     success: function(response) { 
 
      if (response.Result == 3) { 
 
      self.PatientList.remove(patient); 
 
      ShowToastMessage("Patient has been deleted successfully", "Success", true); 
 
      } 
 
     }, 
 
     error: function(errorThrown) {} 
 
     }); 
 
    } 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(new Patients(ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model))))); 
 
    App.init(); 
 
    TableManaged.init(); 
 
});

<table class="table table-striped table-bordered table-hover" id="sample_3" style="line-height:22px;table-layout:fixed;overflow-x:hidden;"> 
 
    <thead> 
 
    <tr style="background-color:#348fe2"> 
 
     <th style="width:5%;text-align:center"> 
 
     <span class="showellipses">Active Patient</span> 
 
     </th> 
 
     <th style="width:10%"><span>Name</span> 
 
     </th> 
 
     <th style="width:20%"><span class="showellipses">Address</span> 
 
     </th> 
 
     <th style="width:10%"><span class="showellipses">PrescribingDay</span> 
 
     </th> 
 
     <th style="width:5%"><span class="showellipses">No. of items in four week</span> 
 
     </th> 
 
     <th style="width:10%"><span class="showellipses">Assembly Week</span> 
 
     </th> 
 
     <th style="width:10%"><span>Delivery Day</span> 
 
     </th> 
 
     <th style="width:5%">Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach:PatientList"> 
 
    <tr class="odd gradeX"> 
 
     <td style="text-align:center"> 
 
     <input type="checkbox" data-bind="checked:IsActive, click:ChangePatientStatus" class="checkboxes" /> 
 
     </td> 
 
     <td> 
 
     <span class="showellipses" data-bind="text:PatientName"></span> 
 
     </td> 
 
     <td> 
 
     <span class="showellipses" data-bind="text:FullAddress"></span> 
 
     </td> 
 
     <td> 
 
     <span data-bind="text:PrescribingDay"></span> 
 
     </td> 
 
     <td class="center"> 
 
     <span data-bind="text:OneWeekItems"></span> 
 
     </td> 
 
     <td> 
 
     <span data-bind="text:WeekColor"></span> 
 
     </td> 
 
     <td> 
 
     <span data-bind="text:DeliveryDay"></span> 
 
     </td> 
 
     <td> 
 
     <a title="Edit" style="text-decoration:none" class="fa fa-edit" data-bind="attr: { 'href': '@Url.Action(" PatientView ", "Patient ")?MDSPatientId=' + MDSPatientId()}"></a>&nbsp;| 
 
     <a title="Delete" style="text-decoration:none" class="fa fa-trash-o" data-bind="click:$parent.DeletePatient"></a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

はそのドキュメントlinkからの例です。

jqueryプラグインに通知してテーブルを更新する必要があります。 基本的に配列の変更を購読し、削除された行を無効にする必要があります。 は、彼らは、このような観察可能な配列に加入するためのヘルパーを使用することをお勧め：

// Helper function so we know what has changed 
// http://stackoverflow.com/questions/12166982 
ko.observableArray.fn.subscribeArrayChanged = function(addCallback, deleteCallback) { 
    var previousValue = undefined; 
    this.subscribe(function(_previousValue) { 
     previousValue = _previousValue.slice(0); 
    }, undefined, 'beforeChange'); 
    this.subscribe(function(latestValue) { 
     var editScript = ko.utils.compareArrays(previousValue, latestValue); 
     for (var i = 0, j = editScript.length; i < j; i++) { 
      switch (editScript[i].status) { 
       case "retained": 
        break; 
       case "deleted": 
        if (deleteCallback) 
         deleteCallback(editScript[i].value); 
        break; 
       case "added": 
        if (addCallback) 
         addCallback(editScript[i].value); 
        break; 
      } 
     } 
     previousValue = undefined; 
    }); 
}; 

そして、あなたは購読して、配列の変化に行動する必要があります。

self.PatientList.subscribeArrayChanged(
     function (addedItem) { 
      dt.row.add(addedItem).draw(); 
     }, 
     function (deletedItem) { 
      var rowIdx = dt.column(0).data().indexOf(deletedItem.id); 
      dt.row(rowIdx).remove().draw(); 
     } 
    ); 

はここで完全な例でplunkです。