Pager Demo

by Alexei Zaviruha

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script>
    // TODO: move to CDN
function range(e,t){for(var a=[],s=e;t>s;s++)a.push(s);return a}var BASE_SHIFT=0,TITLE_SHIFT=1,TITLES={first:"First",prev:"«",prevSet:"...",nextSet:"...",next:"»",last:"Last"},Pager=React.createClass({displayName:"Pager",propTypes:{current:React.PropTypes.number.isRequired,total:React.PropTypes.number.isRequired,visiblePages:React.PropTypes.number.isRequired,titles:React.PropTypes.object,onPageChanged:React.PropTypes.func,onPageSizeChanged:React.PropTypes.func},handleFirstPage:function(){this.isPrevDisabled()||this.handlePageChanged(BASE_SHIFT)},handlePreviousPage:function(){this.isPrevDisabled()||this.handlePageChanged(this.props.current-TITLE_SHIFT)},handleNextPage:function(){this.isNextDisabled()||this.handlePageChanged(this.props.current+TITLE_SHIFT)},handleLastPage:function(){this.isNextDisabled()||this.handlePageChanged(this.props.total-TITLE_SHIFT)},handleMorePrevPages:function(){var e=this.calcBlocks();this.handlePageChanged(e.current*e.size-TITLE_SHIFT)},handleMoreNextPages:function(){var e=this.calcBlocks();this.handlePageChanged((e.current+TITLE_SHIFT)*e.size)},handlePageChanged:function(e){var t=this.props.onPageChanged;t&&t(e)},calcBlocks:function(){var e=this.props,t=e.total,a=e.visiblePages,s=e.current+TITLE_SHIFT,i=Math.ceil(t/a),n=Math.ceil(s/a)-TITLE_SHIFT;return{total:i,current:n,size:a}},isPrevDisabled:function(){return this.props.current<=BASE_SHIFT},isNextDisabled:function(){return this.props.current>=this.props.total-TITLE_SHIFT},isPrevMoreHidden:function(){var e=this.calcBlocks();return e.total===TITLE_SHIFT||e.current===BASE_SHIFT},isNextMoreHidden:function(){var e=this.calcBlocks();return...

JavaScript 1.7

var PagerDemo = React.createClass({
    getInitialState: function () {
        return {
            total:       11,
            current:     5,
            visiblePage: 3
        };
    },
    
    handlePageChanged: function ( newPage ) {
        this.setState({ current : newPage });
    },
    
    render: function() {
        return (<Pager total={this.state.total}
                       current={this.state.current}
                       visiblePages={this.state.visiblePage}
                       titles={{
                           first:   'F',
                           prev:    'P',
                           prevSet: '<<<',
                           nextSet: '>>>',
                           next:    'N',
                           last:    'L'
                       }}
                       onPageChanged={this.handlePageChanged}/>);
    }
});

React.render(<PagerDemo />, document.body);