JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<!-- ko foreach: paginated -->
<div class="label">
	<input type="text" data-bind="value: $data"/>
</div>
<!-- /ko -->
<div class="pager">
	<a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&lt;</a>
    <!-- ko foreach: totalPagesHolder -->
    <a href="#" data-bind="click: $parent.pageController"><span class="current" data-bind="text: $data, style: { 
     color: $parent.pageNumber() + 1 == $data ? '#fff' : '',
	 background: $parent.pageNumber() + 1 == $data ? '#7dc0ff' : '' } "></span></a>
    <!-- /ko -->
	<a href="#" class="next" data-bind="click: next, visible: hasNext">&gt;</a>
</div>

JavaScript

var Model = function() {
    var self = this;
    this.all = ko.observableArray([]);
    this.pageNumber = ko.observable(0);
    this.nbPerPage = 25;
    self.totalPagesHolder = ko.observableArray([]);
	this.totalPages = ko.computed(function() {
		var div = Math.floor(self.all().length / self.nbPerPage);
		div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
			
            var pages = div - 1;
            self.totalPagesHolder.removeAll();
			for(var i=0; i < pages + 1; i++) {
				self.totalPagesHolder.push(i + 1);
			}		
        
        return div - 1;
	});
    
    self.pageController = function(targetPage) {
        return self.pageNumber(targetPage - 1);
    }
        
    this.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.all.slice(first, first + self.nbPerPage);
    });
	this.hasPrevious = ko.computed(function() {
		return self.pageNumber() !== 0;
	});
	this.hasNext = ko.computed(function() {
		return self.pageNumber() !== self.totalPages();
	});
	this.next = function() {
		if(self.pageNumber() < self.totalPages()) {
			self.pageNumber(self.pageNumber() + 1);
		}
	}
	
	this.previous = function() {
		if(self.pageNumber() != 0) {
			self.pageNumber(self.pageNumber() - 1);
		}
	}
    
    this.loadData = function() {
			var array = [];
			for (var i = 0; i < 200; i++) {
                self.all.push(self.randomString());   
			}
       
    }
    
	this.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;		
	}
    
    this.loadData();
}

ko.applyBindings(new Model());