// sample data
var data = [
{city:"Fort Dodge", zip:"34889"},
{city:"Fitchburg", zip:"83366"},
{city:"Menomonee Falls", zip:"52534"},
{city:"Norfolk", zip:"02232"},
{city:"Dearborn", zip:"55899"},
{city:"Pomona", zip:"90483"},
{city:"Port Orford", zip:"02565"},
{city:"Clovis", zip:"98500"},
{city:"Sister Bay", zip:"20285"},
{city:"Bethlehem", zip:"57757"},
{city:"Broken Arrow", zip:"18820"},
{city:"Idabel", zip:"65964"},
{city:"Macomb", zip:"43974"},
{city:"Dearborn", zip:"03451"},
{city:"Corinth", zip:"93401"},
{city:"El Paso", zip:"26282"},
{city:"Cortland", zip:"67010"},
{city:"Barre", zip:"52555"},
{city:"Aspen", zip:"62155"},
{city:"New Brunswick", zip:"68095"},
{city:"Garland", zip:"85242"},
{city:"Gloucester", zip:"33586"},
{city:"Beacon", zip:"21493"},
{city:"New Rochelle", zip:"82251"},
{city:"Fairbanks", zip:"66241"},
{city:"Lewiston", zip:"38572"},
{city:"Bismarck", zip:"91912"},
{city:"Hammond", zip:"69642"},
{city:"Uniontown", zip:"31508"},
{city:"Rolla", zip:"92430"}
];
var StaticDataExample1 = function(data){
// stuff I care about
this.items = ko.observableArray(data);
// pager related stuff
// ---------------------------------------------
this.currentPage = ko.observable(1);
this.perPage = 10;
this.pagedItems = ko.computed(function(){
var pg = this.currentPage(),
start = this.perPage * (pg-1),
end = start + this.perPage;
return this.items().slice(start,end);
}, this);
this.nextPage = function(){
if(this.nextPageEnabled())
this.currentPage(this.currentPage()+1);
};
this.nextPageEnabled = ko.computed(function(){
return this.items().length > this.perPage * this.currentPage();
},this);
this.previousPage = function(){
if(this.previousPageEnabled())
this.currentPage(this.currentPage()-1);
};
this.previousPageEnabled = ko.computed(function(){
return this.currentPage() > 1;
},this);
};
ko.applyBindings(new StaticDataExample1(data),document.getElementById("test"));
<div id="test" class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>City</th>
<th>Zip</th>
</tr>
</thead>
<tbody data-bind="foreach: pagedItems">
<tr>
<td data-bind="text: city"></td>
<td data-bind="text: zip"></td>
</tr>
</tbody>
</table>
<ul class="pager">
<li data-bind="css: {'disabled': !previousPageEnabled()}">
<a href="#" data-bind="click: previousPage">Previous</a>
</li>
<li data-bind="css: {'disabled': !nextPageEnabled()}">
<a href="#" data-bind="click: nextPage">Next</a>
</li>
</ul>
</div>