JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<center>
    <table class="border" data-bind="if: table">
        <tbody data-bind="foreach: currentPage">
            <tr>
                <td data-bind="text: a"></td>
                <td>&nbsp;|&nbsp;</td>
                <td data-bind="text: b"></td>
            </tr>
        </tbody>
    </table>
<button data-bind="visible: table().length == 0, click: loadTable" width="200" height="100">Load table</button>
<button data-bind="visible: table().length > 0, click: nextPage" width="200" height="100">Next page</button>

JavaScript

var data = {
    json: $.toJSON([{a:1, b: 2},{a:2, b:3},{a:3, b:4},
                    {a:4, b: 5},{a:5, b:6},{a:6, b:7},
                    {a:7, b: 8},{a:8, b:9},{a:9, b:10},
                    {a:10, b: 11},{a:11, b:12},{a:12, b:13}
                   ]),
        delay: 0.1
}
    
var dataMapping = {
   key: function(data) {
       return ko.utils.unwrapObservable(data.a);
   },
   create: function(options) {
       return new Data(options.data);
   }
}

var Data = function(data) {
    this.a = data.a;
    this.b = data.b;
}            
    
var ViewModel = function() {
  var self = this;
  self.table = new ko.observableArray();
  self.page = ko.observable();
  self.loadTable = function() {
    // Use JSFiddle echo to simulate an AJAX service
    $.ajax({ url:"/echo/json/", data:data, type:"POST",
             success:function(data)
             {
               // Map the returned JSON to the View Model  
               self.table = ko.mapping.fromJS(data, dataMapping);
               self.page(1);
              }
            })
     
  };
      
  self.currentPage = ko.computed(function () {
      return self.table.slice((self.page()-1)*3, self.page()*3);
  });

  self.nextPage = function() {
      if (self.page() < 4) {
          self.page(self.page() + 1);
      } else {
          self.page(1);
      }
  };
}   

ko.applyBindings(new ViewModel());