Knockout and DataTables

datatables, javascript, knockout.js

Solution

Add a setTimeout to let the DOM finish updating before you try to attach the dataTable.

http://jsfiddle.net/jearles/sQrNu/1/

Problem

I am trying to use DataTables with a knockout-generated table. The problem is illustrated here: http://jsfiddle.net/sQrNu/ In my table I have a number of fixed column headers, plus a number of column headers that come from the view model. This works fine with a standard HTML table in knockout. However when the dataTable widget is applied to the table, the dynamic columns get turned into a simple column with the text "[object Object]". It seems that after dataTables gets applied the templating breaks. If I replace the template: data-bind="text: $data" With: data-bind="text: JSON.stringify($data)" Then I find that suddenly $data now erroneously refers to my root view model; the "foreach: headers" is no longer working. Is this a bug in Knockout?

Original source