JSFiddle - React, Tailwind, and code Playground

by Francesco Frustaci

HTML

<div data-bind="with:namelist">
    <div class="pager"><span class="prev" data-bind="css: {disable:index() == 1},click: prev">PREV</span>

        <!--
        ko foreach:pagers --> <span data-bind="text: $data,css: {current:$data == $parent.index()}, click: $parent.pagerClick"></span>

        <!--/ko
        --> <span class="next" data-bind="css: {disable:index() == maxPage()}, click: next">NEXT</span>

    </div>
    <ul data-bind="foreach:items">
        <li data-bind="text:$data"></li>
    </ul>
</div>

CSS

.pager span {
    display:inline-box;
    padding:5px;
    background:#666;
    color:#ccc;
    margin:0 2px;
    cursor:pointer;
}
.pager span.current {
    color:#666;
    background:#ccc;
}
.pager span.disable {
    color:#eee;
    background:none;
    cursor:default;  
}

JavaScript

function Pagination(items, itemsPerPage, pagersPerPage) {
    var self = this;
    self._itemsBase = ko.observableArray(items);
    self.perPage = ko.observable(itemsPerPage);
    self.perPager = ko.observable(pagersPerPage);
    self.index = ko.observable(1);
    self.maxAmount = ko.computed(function () {
        return self._itemsBase().length
    });
    self.maxPage = ko.computed(function () {
        return Math.ceil(self.maxAmount() / self.perPage())
    });

    self.pagers = ko.computed(function () {
        var median = parseInt(self.perPager() / 2),
            start = 1,
            end = self.maxPage(),
            sequence = [];

        if (self.maxPage() > self.perPager()) {
            if (self.index() <= median) {
                end = self.perPager();
            } else if (self.index() >= self.maxPage() - median) {
                start = self.maxPage() - self.perPager() + 1;
            } else {
                start = self.index() - median;
                end = self.index() + median;
            }
        }
        for (var i = start; i <= end; i++) {
            sequence.push(i);
        }
        return sequence;
    });

    self.items = ko.computed(function () {
        var start = (self.index() - 1) * self.perPage(),
            end = self.index() * self.perPage();
        if (end > self.maxAmount()) {
            end = self.maxAmount();
        };
        return self._itemsBase().slice(start, end);
    });

    //methods
    self.goto = function (i) {
        if (i < 1) {
            self.index(1);
        } else if (i > self.maxPage()) {
            self.index(self.maxPage());
        } else {
            self.index(i);
        }
    }
    self.pagerClick = function () {
        self.goto(this)
    };

    self.next = function () {
        self.goto(self.index() + 1);
    }
    self.prev = function () {
        self.goto(self.index() - 1);
    }
}

var VM = {
    namelist: new Pagination(["tom", "jerry", "ben", "allen", "jimmy",...