Knockout Viewmodel binding and Datatable Sorting

Parthiban

I'm using Knockout for data binding and using dataTable+YADCF for Sorting and filtering. My scenario is little complex, on clicking the Category nodes (left side) each time need to make an AJAX call and refresh the table data (right side) through Knockout. This Knockout binding functionality works fine without any issue.

HTML Code

<table class="pdm-data-table pdmList" id="ListCatAttrVal" data-link="row">
<thead>
  <tr>
    <th>Display Name</th>
    <th>Display Source</th>
  </tr>
</thead>
<tbody id="listAttribute" data-bind="foreach: attributevalue">
  <tr>
    <td data-bind="text: dispName"></td>
    <td data-bind="text: dispSrc"></td>
  </tr>
</table>

Knockout Model Code

if (!ko.dataFor(document.getElementById("listAttribute"))) {
  var attributeModel = function () {
    this.attributevalue = ko.observableArray();
  };
  attributeBinding = new attributeModel();
  ko.applyBindings(attributeBinding, document.getElementById("listAttribute"));
}

Issue is after applying DataTable for the Table

$("#ListCatAttrVal").dataTable().fnClearTable();
for (var x in response.attributes) {
  attributeBinding.attributevalue.push(response.attributes[x]);
}
$("#ListCatAttrVal").dataTable(); 

After this, Datatable Sorting is not working. I'm trying to remove the existing generated dataTable and re-initiate it every-time when I click on the category node. But it is not working as expected.

KungFuCoder

Here is a link to a custom binding that might help.
https://github.com/JohnBergman/knockout.datatables