JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var TableAndPaginator = React.createClass({
    getInitialState: function() {
        return {
            pages: [[1, 2, 3], [4, 5, 6]],
            currentPage: 0
        }
    },
    
    fetch: function(currentPage, cb) {
        if (currentPage < this.state.pages.length) {
            cb(this.state.pages);
            return;
        }
        
        $.ajax('get-page-by-id', currentPage, function(page) {
            cb(this.state.pages.concat(page));
        });
    },
    
    onChange: function(currentPage) {
        this.fetch(currentPage, function(pages) {
            this.setState({
                pages: pages,
                currentPage: currentPage
            })
        }.bind(this));
    },
    
    render: function() {
        return <div>
            <Table page={this.state.pages[this.currentPage]} />
            <Paginator onChange={this.onChange} />
        </div>;
    }
});