knockout pagination

knockout pagination

by Ignacio Fuentes

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<table>
   <tr>
       <th>Id</th>
       <th>Type</th>
       <th>Name</th>
    </tr>
  <tbody data-bind='foreach: paginatedRows'>
       <tr>
         <td data-bind="text: Id"></td>
         <td data-bind="text: Type"></td>
           <td><b data-bind="text: Name"></b><span data-bind="text: Description"></span></td>
    </tr> 
    </tbody>
</table>
<a href="#" data-bind="click: previousPage, visible: pageIndex() > 0">Previous</a>
<a href="#" data-bind="click: nextPage, visible: pageIndex() < maxPageIndex()">Next</a>

CSS

td { padding: 5px; border: solid black 1px; }

JavaScript

function ViewModel(jsondata) {
    var self = this;
    fields = ko.observableArray(jsondata);
    self.pageSize = ko.observable(5);
    self.pageIndex = ko.observable(0);
    self.previousPage = function() {
        self.pageIndex(self.pageIndex() - 1);
    };
    self.nextPage = function() {
        self.pageIndex(self.pageIndex() + 1);
        alert(self.pageIndex());
    };
    self.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(fields().length / self.pageSize()) - 1;
    }, self);
    
    self.paginatedRows = fields.paginate(self.pageIndex, self.pageSize)
}
$(function() {
    ko.observableArray.fn.paginate= function(index, size) {
    return ko.computed(function() {
        var fields= this();
        var start = index() * size();        
        return fields.slice(start(), start() + size);
    }, this);
}
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push({
            Id: i,
            Type: "Type" + i,
            Name: "Name" + i,
            Description: "Description" + i
        })
    }
    var viewModel = new ViewModel(data);
    ko.applyBindings(viewModel);
});