PagedObservableArray Sample

by stevegreatrex

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/stevegreatrex/JsUtils/master/JsUtils/pagedobservablearray.js"></script>
<div data-bind="with: pagedList">
    <div>
        <a href="#" data-bind="click: previousPage">Previous Page</a>
        <span data-bind="text: 'Page ' + (pageIndex() + 1) + ' of ' + pageCount()"></span>
        <a href="#" data-bind="click: nextPage">Next Page</a>
    </div>
    <ul data-bind="foreach: page">
        <li data-bind="text: $data"></li>
    </ul>
</div>

CSS

* { font-family: 'Segoe UI' }
li { margin: 1px; background: #eee; }

JavaScript

var fakeData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var ViewModel = function(data) {
    this.pagedList = new Utils.PagedObservableArray({
        data: data,
        pageSize: 3
    });
};

ko.applyBindings(new ViewModel(fakeData));