JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div id="displayArea">
<div data-bind="foreach: currentPageItems">
    <div data-bind="text: $data"></div>
</div>
<ul data-bind="foreach: allPageIndexes">
    <li>
        <a href="#" data-bind="click: $root.currentPage, text: $data+1"></a>
    </li>
</ul>
</div>

CSS

ul { display: inline; }
li { list-style-type: none; display: inline; }

JavaScript

var TestViewModel = function() {
    var self = this;
    self.pageSize = 10;
    self.currentPage = ko.observable(0);
    self.items = ko.observableArray([]);
    self.allPageIndexes = ko.observableArray([]);

    self.setupTestData = function() {
        // setup test data
        for (var i = 0; i < 500; i++) {
            self.items.push("item number " + i);
        }
        for (var i = 0; i < self.items().length / self.pageSize; i++) {
            self.allPageIndexes.push(i);
        }
    };
    
    self.currentPageItems = ko.computed(function() {
        var startIndex = self.pageSize * self.currentPage();
        return self.items.slice(startIndex, startIndex + self.pageSize);
    });
}

var vm = new TestViewModel ();
vm.setupTestData();
ko.applyBindings(vm, document.getElementById('displayArea'));