adding client side paging to table, should I use knockoutjs…

http://stackoverflow.com/questions/5975429/adding-client-side-paging-to-table-should-i-use-knockoutjs

by Ignacio Fuentes

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<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: pagedRows'>
       <tr>
         <td data-bind="text: FieldId"></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;
    self.fields = ko.observableArray(jsondata);
    self.pageSize = ko.observable(10);
    self.pageIndex = ko.observable(0);
    self.previousPage = function() {
        self.pageIndex(self.pageIndex() - 1);
    };
    self.nextPage = function() {
        self.pageIndex(self.pageIndex() + 1);
    };
    self.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(self.fields().length / self.pageSize()) - 1;
    }, self);
    self.pagedRows = ko.dependentObservable(function() {
        var size = self.pageSize();
        var start = self.pageIndex() * size;
        return self.fields.slice(start, start + size);
    }, self);
}
$(function() {
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push({
            FieldId: i,
            Type: "Type" + i,
            Name: "Name" + i,
            Description: "Description" + i
        })
    }
    var viewModel = new ViewModel(data);
    ko.applyBindings(viewModel);
});