Datatables - Jquery

by bradleytrager

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div data-bind="template:{name:'datatable', data:sampleData }"></div>
<table>
    <thead>
        <tr data-bind="foreach:columns">
            <th data-bind="text:sTitle"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach:rows">
        <tr data-bind="foreach:$data">
            <td data-bind="text:$data"></td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);
    $('table').dataTable();
});
ko.bindingHandlers.templateWrapper = {
    init: ko.bindingHandlers.template.init,
    update: function (a, d, c, e, f) {
        ko.bindingHandlers.template.update(a, d, c, e, f);
    }
};

function viewModel() {
    var self = this;
    self.columns = ko.observableArray(data.aoColumns);
    self.rows = ko.observableArray(data.aaData);
    self.sampleData = {
        columns: ko.observableArray(data.aoColumns),
        rows: ko.observableArray(data.aaData)
    };
}
var data = {
    "aaData": [
        ["Trident", "Internet Explorer 4.0", "Win 95+", 4, "X"],
        ["Trident", "Internet Explorer 5.0", "Win 95+", 5, "C"],
        ["Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
        ["Trident", "Internet Explorer 6.0", "Win 98+", 6, "A"],
        ["Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
        ["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"],
        ["Webkit", "Safari 1.2", "OSX.3", 125.5, "A"],
        ["Webkit", "Safari 1.3", "OSX.3", 312.8, "A"],
        ["Webkit", "Safari 2.0", "OSX.4+", 419.3, "A"],
        ["Webkit", "Safari 3.0", "OSX.4+", 522.1, "A"]
    ],
        "aoColumns": [{
        "sTitle": "Engine"
    }, {
        "sTitle": "Browser"
    }, {
        "sTitle": "Platform"
    }, {
        "sTitle": "Version",
            "sClass": "center"
    }, {
        "sTitle": "Grade",
            "sClass": "center",
            "fnRender": function (obj) {
            var sReturn = obj.aData[obj.iDataColumn];
            if (sReturn == "A") {
                sReturn = "<b>A</b>";
            }
            return sReturn;
        }
    }]
};