title: Bootstrap datatable not refresh on underlying data changed (knockout binding)
body: <p>I am using knockout to bind my data to table and on page startup everything is working fine as expected. When i changed the underlying data by calling getDataByFilter() function, datatable data get refresh by knockout and everything is working fine as well. </p>
  
  <p>Thing started to corrupt when i added paging and sorting by using $('#datatable_requirement').DataTable(). Everytime when i trigger getDataByFilter() function to retrieve new data, New data keep on stack on top of the existing data and sorting and searching is not functioning anymore. Google around still can't find any solution :(</p>
  
  <p>Here is my View and Viewmodel</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="javascript:void(0);" data-bind="click: getDataByFilter('pass some filter set')"&gt;Get new data&lt;/a&gt;
  &lt;table id="datatable_requirement" class="table table-striped table-bordered" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="hasinput" style="width:17%"&gt;
                  &lt;input type="text" class="form-control" placeholder="Filter Id" /&gt;
              &lt;/th&gt;
              &lt;th class="hasinput" style="width:17%"&gt;
                  &lt;input type="text" class="form-control" placeholder="Filter Name" /&gt;
              &lt;/th&gt;
              &lt;th class="hasinput" style="width:16%"&gt;
                  &lt;input type="text" class="form-control" placeholder="Filter Status" /&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th data-class="expand"&gt;Id&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th data-hide="phone"&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;!-- ko foreach: requirements --&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;span data-bind="text: ReqEtpDispIdPrefix() + '-' + ReqDispId()"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span data-bind="text: ReqName"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span data-bind="text: ReqSttName"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- /ko --&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
   $.getJSON("/api/GetAllRequirementByFilter/", function (data){
  
   var VM = new ViewModel(data);
   ko.applyBindings(VM);
  
  var responsiveHelper_datatable_requirement = undefined;
  
  var otable = $('#datatable_requirement').DataTable({
      "sDom": "&lt;'dt-toolbar'&lt;'col-xs-12 col-sm-6 hidden-xs'f&gt;&lt;'col-sm-6 col-xs-12 hidden-xs'l&gt;r&gt;" +
              "t" +
              "&lt;'dt-toolbar-footer'&lt;'col-sm-6 col-xs-12 hidden-xs'i&gt;&lt;'col-xs-12 col-sm-6'p&gt;&gt;",
      "autoWidth": true,
      "preDrawCallback": function () {
          // Initialize the responsive datatables helper once.
          if (!responsiveHelper_datatable_requirement) {
              responsiveHelper_datatable_requirement = new ResponsiveDatatablesHelper($('#datatable_requirement'), breakpointDefinition);
          }
      },
      "rowCallback": function (nRow) {
          responsiveHelper_datatable_requirement.createExpandIcon(nRow);
      },
      "drawCallback": function (oSettings) {
          responsiveHelper_datatable_requirement.respond();
      }
  });
  
  // custom toolbar
  $("div.toolbar").html('&lt;div class="text-right"&gt;&lt;img src="/Content/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"&gt;&lt;/div&gt;');
  
  // Apply the filter
  $("#datatable_requirement thead th input[type=text]").on('keyup change', function () {
  
      otable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();
  
     });
  });
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>ViewModel:</p>
  
  <pre><code>var ViewModel = function (data) {
  var self = this;
  self.requirements = ko.observableArray([]);
  
  self.requirements = ko.mapping.fromJS(data);
  
  function ajaxHelper(uri, method, data) {
      self.error(''); // Clear error message
      return $.ajax({
          type: method,
          url: uri,
          dataType: 'json',
          contentType: 'application/json',
          data: data ? JSON.stringify(data) : null
      }).fail(function (jqXHR, textStatus, errorThrown) {
          self.error(errorThrown);
      });
  }
  
  self.getDataByFilter = function (item)
  {
      ajaxHelper('/api/someapi/'+ item, 'GET').done(function (data) {
                      ko.mapping.fromJS(data, self.requirements);
                  });
  }
  </code></pre>