jquery - Knockout with DataTables on HTML Table -

i have html table works fine without datatables.

however, want implement datatables can use filtering/search functionality , add/remove columns.

how working knockout?

var viewmodel = function() {    $('#mytable').datatable({          ajax: {              url: this.taskrecords()          }      });    this.taskrecords = ko.observablearray([  {  	entitycode: "name",    entityname: "name desc23",    tagname: "l1",    tasklist: [    	{      	taskname: "taskabc",        taskrecordlist: [        	{           	statusflagname: "ok"          },          {           	statusflagname: "test"          }        ]      },      {      	taskname: "taskdef",        taskrecordlist: [        	{           	statusflagname: "error"          }        ]      }    ]  }  ]);      };  ko.applybindings(new viewmodel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="https://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>  <link href="https://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>          <table id="mytable" class="table table-hover table-bordered">              <thead>                  <tr>                      <th>entity code</th>                      <th>entity name</th>                      <th>control level</th>                  </tr>              </thead>              <tbody id="sortable" data-bind="foreach: taskrecords">                  <tr class="ui-state-default">                      <td class="ui-state-default" data-bind="text: entitycode"></td>                      <td class="ui-state-default" data-bind="text: entityname"></td>                      <td class="ui-state-default" data-bind="text: tagname"></td>                      <!--ko foreach: tasklist-->                      <td>                          <div data-bind="text: taskname"></div>                          <table>                              <tbody>                                  <!--ko foreach: taskrecordlist-->                                  <tr>                                      <td data-bind="text: statusflagname"></td>                                  </tr>                                  <!--/ko-->                              </tbody>                          </table>                      </td>                      <!--/ko-->                  </tr>              </tbody>          </table>

problem

it looks trying bind data twice:

1. with knockout in html
2. with datatable ajax url

and there problem: datatable not add table columns without corresponding header.

solution

i got work 2 modifications:

a. no data binding datatable, init with:

$('#mytable').datatable({  responsive: true }); 

b. add <th>tasks</th> table header

complete solution: https://codepen.io/donkarlssonsan/pen/mmvvme/