Pagination with knockout

by Asle Gundersby

HTML

<div class="pager">
	<a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&lt; Previous</a>
	<span class="current" data-bind="text: $root.pageNumber"></span>
	<a href="#" class="next" data-bind="click: next, visible: hasNext">Next &gt;</a>
</div>
<br>
<!-- ko foreach: paginated -->
<div class="label">
	<input type="text" data-bind="value: $data"/>
</div>
<!-- /ko -->

CSS

a {
    text-decoration: none;
}

JavaScript

var Model = function() {
    var self = this;
    self.BlogThreadHeads = ko.observableArray([]);
    self.pageNumber = ko.observable(0);
    self.nbPerPage = 1;
	self.totalPages = ko.computed(function() {
		var div = Math.floor(self.BlogThreadHeads().length / self.nbPerPage);
		div += self.BlogThreadHeads().length % self.nbPerPage > 0 ? 1 : 0;
		return div - 1;
	});
    
    self.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.BlogThreadHeads.slice(first, first + self.nbPerPage);
    });
	
    
    self.hasPrevious = ko.computed(function() {
		return self.pageNumber() !== 0;
	});
	self.hasNext = ko.computed(function() {
		return self.pageNumber() !== self.totalPages();
	});
	
    
    self.next = function() {
		if(self.pageNumber() < self.totalPages()) {
			self.pageNumber(self.pageNumber() + 1);
		}
	}
	self.previous = function() {
		if(self.pageNumber() !== 0) {
			self.pageNumber(self.pageNumber() - 1);
		}
	}
    
    
    
    
    self.loadData = function() {
			var array = [];
			for (var i = 0; i < 200; i++) {
                self.BlogThreadHeads.push(self.randomString());   
			}
    }
    
	self.randomString = function() {
		var value = "";
		var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		for( var i=0; i < 10; i++ ) {
			value += letters.charAt(Math.floor(Math.random() * letters.length));
		}
		return value;		
	}
    
    self.loadData();
}

ko.applyBindings(new Model());