JSFiddle - React, Tailwind, and code Playground

by lelandrichardson

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
    <div id="test" class="container">

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>City</th>
                    <th>Zip</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: items.pagedItems">
                <tr>
                    <td data-bind="text: city"></td>
                    <td data-bind="text: zip"></td>
                </tr>
            </tbody>
        </table>

        <ul class="pager">
            <li data-bind="css: {'disabled': !items.prev.enabled()}">
                <a href="#" data-bind="click: items.prev">Previous</a>
            </li>
            <li data-bind="css: {'disabled': !items.next.enabled()}">
                <a href="#" data-bind="click: items.next">Next</a>
            </li>
        </ul>

    </div>

CSS

.pager {
    margin-bottom:0;
}

JavaScript

// sample data
var data = [
    {city:"Fort Dodge", zip:"34889"},
    {city:"Fitchburg", zip:"83366"},
    {city:"Menomonee Falls", zip:"52534"},
    {city:"Norfolk", zip:"02232"},
    {city:"Dearborn", zip:"55899"},
    {city:"Pomona", zip:"90483"},
    {city:"Port Orford", zip:"02565"},
    {city:"Clovis", zip:"98500"},
    {city:"Sister Bay", zip:"20285"},
    {city:"Bethlehem", zip:"57757"},
    {city:"Broken Arrow", zip:"18820"},
    {city:"Idabel", zip:"65964"},
    {city:"Macomb", zip:"43974"},
    {city:"Dearborn", zip:"03451"},
    {city:"Corinth", zip:"93401"},
    {city:"El Paso", zip:"26282"},
    {city:"Cortland", zip:"67010"},
    {city:"Barre", zip:"52555"},
    {city:"Aspen", zip:"62155"},
    {city:"New Brunswick", zip:"68095"},
    {city:"Garland", zip:"85242"},
    {city:"Gloucester", zip:"33586"},
    {city:"Beacon", zip:"21493"},
    {city:"New Rochelle", zip:"82251"},
    {city:"Fairbanks", zip:"66241"},
    {city:"Lewiston", zip:"38572"},
    {city:"Bismarck", zip:"91912"},
    {city:"Hammond", zip:"69642"},
    {city:"Uniontown", zip:"31508"},
    {city:"Rolla", zip:"92430"}
];

ko.observableArray.fn.paged = function(perPage){
    var items = this;

    items.current = ko.observable(1);
    items.perPage = perPage;
    items.pagedItems = ko.computed(function(){
        var pg = this.current(),
            start = this.perPage * (pg-1),
            end = start + this.perPage;
        return this().slice(start,end);
    }, items);

    items.next = function(){
        if(this.next.enabled())
            this.current(this.current()+1);
    }.bind(this);

    items.next.enabled = ko.computed(function(){
        return this().length > this.perPage * this.current();
    },items);

    items.prev = function(){
        if(this.prev.enabled())
            this.current(this.current()-1);
    }.bind(this);

    items.prev.enabled = ko.computed(function(){
        return this.current() > 1;
    },items);


    return items;
};

var StaticDataExample =...