Paging with selected records (MOCK DATA WITHOUT SERVER HIT)

http://jsfiddle.net/craigcav/UzUBm/

HTML:

<table>

    <thead>

        <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Sales</th>

            <th>Price</th>

        </tr>

    </thead>

    <tbody data-bind="foreach: items">

        <tr>

            <td data-bind="text: id"></td>

            <td data-bind="text: name"></td>

            <td data-bind="text: sales"></td>

            <td data-bind="text: price"></td>

        </tr>

    </tbody>           

</table>

<span id="pager" data-bind="with: items.pager">

    <button data-bind="click: first">First</button>

    <button data-bind="click: previous">Prev</button>

    <span class="summary">Page

        <span data-bind="text: page"></span> of

        <span data-bind="text: totalPages"></span></span>

    <button data-bind="click: next">Next</button>

    <button data-bind="click: last">Last</button>

</span>

JS:

var initialData = [

  { id:1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },

  { id:2, name: "Speedy Coyote", sales: 89, price: 190.00 },

  { id:3, name: "Furious Lizard", sales: 152, price: 25.00 },

  { id:4, name: "Indifferent Monkey", sales: 1, price: 99.95 },

  { id:5, name: "Brooding Dragon", sales: 0, price: 6350 },

  { id:6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },

  { id:7, name: "Optimistic Snail", sales: 420, price: 1.50 }

];

function getAnimals() {

    var params = {

        limit: this.pager.limit(),

        startIndex: this.pager.limit() * (this.pager.page() - 1)

    };

    $.ajax({

        type: 'POST',

        url: '/echo/json/',

        data: {

            json: ko.toJSON(initialData.slice(params.startIndex, params.startIndex + params.limit))

        },

        context: this,

        success: function(data) {

            this(data);

            this.pager.totalCount(7);

        },

        dataType: 'json'

    });

};

var viewModel = {

    items: ko.observableArray([]).extend({

        datasource: getAnimals,

        pager: {

            limit: 3

        }

    })

};

ko.applyBindings(viewModel);