Knockout DataTable BindingHandler

BindingHandler for Knockout ko.observableArray

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<button data-bind="click: add">Add</button>
<button data-bind="click: remove">Remove</button>
<table data-bind="dataTable: tableData">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CSS

table {
    border: 1px solid #000;
}
thead tr {
    background-color: #bbb;
}
tbody tr {
    background-color: #eee;
}
tbody tr:nth-child(even) {
    background-color: #ddd;
}

JavaScript

/* The dataTable binding */
(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
            if (binding.data().length > 0) {
                $(element).dataTable().fnAddData(binding.data());
            }
        }
    };
})(jQuery);

/* The ViewModel */
var dataTableExampleViewModel = {
    tableData: ko.observableArray([
        ["Existing", "Data","Existing", "Data","Existing", "Data"],
        ["In An", "observableArray","Existing", "Data","Existing", "Data"]
    ]),
    add: function () {
        this.tableData.push([(new Date()).getTime(), "Added","Done",'.',"Ram","Knockout"]);
    },
    remove: function () {
        this.tableData.pop();
    }
};

/* Initialise the ViewModel */
$(function () {
    ko.applyBindings(dataTableExampleViewModel);
});