 <p>This is because the html that is bound to your knockout observable array is mangled when datatables is initialized... The html is copied and reformatted to be "datatables" after initialization. so the elements that you view after datatables initialization are not the same elements that knockout has bound to. I have created a custom binding to use datatables with knockout. it is dependent upon a fork of knockout which adds before render all and after render all events. I have created a pull request with the knockout git hub repository. If the below solution helps you please leave a comment on the pull request to get it merged into knockout 3.4... thanks.</p> <p><a href="http://jsfiddle.net/zachpainter77/4tLabu56/" rel="nofollow">fiddle of working solution</a></p> <p><a href="https://github.com/knockout/knockout/pull/1856" rel="nofollow">my pull request</a></p> <pre><code>ko.bindingHandlers.DataTablesForEach = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var nodes = Array.prototype.slice.call(element.childNodes, 0); ko.utils.arrayForEach(nodes, function (node) { if (node &amp;&amp; node.nodeType !== 1) { node.parentNode.removeChild(node); } }); return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var value = ko.unwrap(valueAccessor()), key = "DataTablesForEach_Initialized"; var newValue = function () { return { data: value.data || value, beforeRenderAll: function (el, index, data) { if (ko.utils.domData.get(element, key)) { $(element).closest('table').DataTable().clear(); $(element).closest('table').DataTable().destroy(); } }, afterRenderAll: function (el, index, data) { $(element).closest('table').DataTable(value.options); } }; }; ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext); //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized if (!ko.utils.domData.get(element, key) &amp;&amp; (value.data || value.length)) { ko.utils.domData.set(element, key, true); } return { controlsDescendantBindings: true }; } }; </code></pre>