JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-debug.js"></script>
<script src="http://legacy.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<table class="table table-bordered"
data-bind="
dataTable: {
data: tableData,
options: {
bJQueryUI: true,
aoColumns: [
{ sTitle: 'categoryName', mData: 'categoryName' },
{ sTitle: 'categoryDescription', mData: 'categoryDescription' }
]
}
}"
/>
JavaScript
(function($){
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor){
var binding = ko.utils.unwrapObservable(valueAccessor());
// If the binding is an object with an options field,
// initialise the dataTable with those options.
if(binding.options){
$(element).dataTable(binding.options);
}
},
update: function(element, valueAccessor){
var binding = ko.utils.unwrapObservable(valueAccessor());
// If the binding isn't an object, turn it into one.
if(!binding.data){
binding = { data: valueAccessor() }
}
// Clear table
$(element).dataTable().fnClearTable();
// Rebuild table from data source specified in binding
$(element).dataTable().fnAddData(binding.data());
}
};
})(jQuery);//only change
function AppViewModel()
{
var self = this;
self.tableData = ko.observableArray();
setTimeout(function(){
var result = {
"aaData": [
{
"client_Id": "",
"categoryId": "1",
"categoryName": "Individual",
"categoryDescription": "A",
"lastUpdatedBy": ""
},
{
"client_Id": "",
"categoryId": "2",
"categoryName": "Firm",
"categoryDescription": "B",
"lastUpdatedBy": ""
},
{
"client_Id": "",
"categoryId": "3",
"categoryName": "Private Limited Company",
"categoryDescription": "C",
"lastUpdatedBy": ""
},
{
"client_Id": "",
...