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 rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.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>
             <strong data-bind="text: Name"></strong>: 
             <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

var myns = {};
myns.DisplayFields = function(jsondata) {
    var viewModel = {
        fields: ko.observableArray(jsondata),
        pageSize: ko.observable(5),
        pageIndex: ko.observable(0),
        previousPage: function() {
            this.pageIndex(this.pageIndex() - 1);
        },
        nextPage: function() {
            this.pageIndex(this.pageIndex() + 1);
        }
    };

    viewModel.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(this.fields().length / this.pageSize()) - 1;
    }, viewModel);
    
    
    viewModel.pagedRows = ko.dependentObservable(function() {
        var size = this.pageSize();
        var start = this.pageIndex() * size;
        return this.fields.slice(start, start + size);
    }, viewModel);

    ko.applyBindings(viewModel);
};

$(function() {
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push({
            FieldId: i,
            Type: "Type" + i,
            Name: "Name" + i,
            Description: "Description" + i
        })
    }

    myns.DisplayFields(data);

});