Simple KnockoutJS Paging With Datatables

Simple KnockoutJS Paging With Datatables

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.js"></script>
<script src="http://chadmullins.com/wp-includes/js/knockout-series/jquery.dataTables.plugins.js"></script>
    <div class="container">

        <header class="page-header">
            <h1>Simple KnockoutJS Paging With Datatables</h1>
        </header>

        <p class="lead">
            This demo pulls data from the <a href="http://data.donorschoose.org/" target="_blank">Donors Choose Data API</a> to demonstrate how paging, sorting, and searching works with <a href="http://knockoutjs.com/" target="_blank">KnockoutJS</a> bound data and <a href="http://datatables.net/" target="_blank">DataTables</a>. Read more in <a href="http://brudtkuhl.com/easy-knockoutjs-pagination-data-tables/">blog post</a>.

            <header class="page-header">
                <h2>Demo <small>Pulling 50 proposals from 50310</small></h2>
            </header>
            
            <div class="form-group">
                <button type="button" class="btn btn-success" data-bind="click: AddData">Add Row</button>
            </div>
        <!-- the table we apply DataTables magic too, data populated with Knockout Foreach...

JavaScript

var model = '';
$(document).ready(function () {
// knockout view model
            function ViewModel(data) {
                var self = this;

                // knockout mapping JSON data to view model
                ko.mapping.fromJS(data, {}, self);
                self.AddData = function () {
                    $.getJSON("http://api.donorschoose.org/common/json_feed.html?zip=50315&APIKey=DONORSCHOOSE&max=1&callback=?", function (result) {
                        var r = ko.mapping.fromJS(result.proposals)()[0];
                        self.proposals.push(r);

                        var unwrappedItems = [];
                        unwrappedItems.push(ko.utils.unwrapObservable(r.proposalURL));
                        unwrappedItems.push(ko.utils.unwrapObservable(r.schoolName));
                        unwrappedItems.push(ko.utils.unwrapObservable(r.percentFunded));
                        unwrappedItems.push(ko.utils.unwrapObservable(r.id));
                        $('table#proposals').dataTable().fnAddData(unwrappedItems);
                    });
                };
            }

            // get data - sample data from Donors Choose API
            $.getJSON("http://api.donorschoose.org/common/json_feed.html?zip=50311&APIKey=DONORSCHOOSE&max=5&callback=?", function (result) {

                // bind the data
                model = new ViewModel(result);
                ko.applyBindings(model);

                // apply DataTables magic
                $("#proposals").DataTable({
                    responsive: true,
                    fnRowCallback: function (row, data) {
                        if (data.length > 3)
                            row.id = data[3];

                        var match = ko.utils.arrayFirst(model.proposals(), function (item) {
                            return row.id === item.id();
                        });

                        // Render the row template for this row.
                        if (match) {
            ...