JSFiddle - React, Tailwind, and code Playground

by ftaran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div id="wrapper">
<div data-bind="foreach: results.pagedItems">
    <div data-bind="text: name"></div>    
</div>
<div data-bind="foreach: results.pagerItems">
    <a href="#" data-bind="text: $data, click: $parent.results.goTo, css: { 'active':$parent.results.current() === $data }"></a>
</div>
    <br/>
    <span data-bind="text: results.currentStart"></span> - <span data-bind="text: results.currentEnd"></span> of <span data-bind="text: results.totalLen"></span>
    <br/>
    <br/>
 <button data-bind="click:$root.changeResults">new results</button>
 </div>

CSS

a.active{
    color: black
}

JavaScript

var fakedata = [
    {id : 1, name: "1" },
    {id : 2, name: "2" },
    {id : 3, name: "3" },
    {id : 4, name: "4" },
    {id : 5, name: "5" },
    {id : 6, name: "6" },
    {id : 7, name: "7" },
    {id : 8, name: "8" },
    {id : 9, name: "9" },
    {id : 10, name: "10" },
    {id : 11, name: "11" },
    {id : 12, name: "12" },
    {id : 13, name: "13" },
    {id : 14, name: "14" },
    {id : 15, name: "15" },
    {id : 16, name: "16" },
    {id : 17, name: "17" },
    {id : 18, name: "18" },
    {id : 19, name: "19" },
    {id : 20, name: "20" }
];
var fakedata2 = [
    {id : 21, name: "21" },
    {id : 22, name: "22" },
    {id : 23, name: "23" },
    {id : 24, name: "24" },
    {id : 25, name: "25" },
    {id : 26, name: "26" },
    {id : 27, name: "27" },
    {id : 28, name: "28" },
    {id : 29, name: "29" },
    {id : 30, name: "30" },
    {id : 31, name: "31" },
    {id : 32, name: "32" },
    {id : 33, name: "33" },
    {id : 34, name: "34" },
    {id : 35, name: "35" },
    {id : 36, name: "36" },
    {id : 37, name: "37" },
    {id : 38, name: "38" },
    {id : 39, name: "39" },
    {id : 40, name: "40" }
];

function searchService(){
    return {
        run : function(){
           return fakedata2;   
        }
    }
}

ko.observableArray.fn.pagedArray = function(perPage){
    
    var items = this;
    items.perPage = perPage;
    items.totalLen = ko.observable(this().length);
    items.current = ko.observable(1);
    //items.pagesPerRequest = Math.ceil(this().length / perPage);
    
    items.pagesPerRequest = ko.computed(function(){
      return Math.ceil(this().length / perPage);  
    }, items);
    
    items.pagerItems = ko.computed(function(){
        var pagerLinks = [];
        var pages = Math.floor(this.totalLen() / this.perPage);
        for(var i = 0; i < pages; i++)
        {
            pagerLinks.push(i+1);
        }
        
        return pagerLinks;
    }, items);
    items.pagedItems = ko.computed(function(){
        var pg...