React的分页实例来了![适合与webpack组合使用,不太适合纯html页面调用,不过可以根据您自己的情况进行改写]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| define(function(require,exports,module){ 'use strict'; var React = require('reactAddons'); module.exports = React.createClass({ clickHandler:function(e){ e.preventDefault(); this.props.listData(e.currentTarget.dataset.page); }, render:function(){ var cx = React.addons.classSet; var preClass = cx({ 'previous':true, 'disabled':this.props.pre_stop == true }); var nextClass = cx({ 'next':true, 'disabled':this.props.next_stop == true }); return ( <nav> <ul className="pager"> <li className={preClass}> <a href="#" onClick={this.clickHandler} data-page={this.props.page-1}> <span aria-hidden="true" >←</span> Older </a> </li> <li className={nextClass}> <a href="#" onClick={this.clickHandler} data-page={this.props.page+1}> Newer <span aria-hidden="true">→</span> </a> </li> </ul> </nav> ); } }); });
|
如何调用?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| const PagerTest = React.createClass(){ getInitialState:function(){ return { lostData: { lostUserItem: [], totalCount: 0, currentTotalCount: 0 }, pagesize: 20, page: 1, params: {} } }, render:function(){ let nextStop = false; let preStop = false; if (this.state.lostData.lostUserItem.length < this.state.pagesize) { nextStop = true; }
if ((this.state.page - 1) <= 0) { preStop = true; }
let pager_props = { page: this.state.page, pre_stop: preStop, next_stop: nextStop, listData: this.loadMorePage }; return ( <Pager {...pager_props}/> ); } }
|