父组件pagination.jsx
import React, { Component } from 'react';import PageComponent from './pageComponent.jsx';import Mock from 'mockjs';import MockApi from '../util/mockApi.js';class Pagination extends Component{ constructor(props){ super(props); this.state = { indexList : [], //获取数据的存放数组 totalNum:'',//总记录数 totalData:{}, current: 1, //当前页码 pageSize:5, //每页显示的条数5条 goValue:'', totalPage:'',//总页数 } }componentWillMount(){ var _this = this;//如果不定义就会出现作用域的问题this.setState不是一个函数 //使用mock模拟数据 $.ajax({ url:MockApi.getIndexList()+/\/\.json/, dataType:'json', }).done(function(data){ _this.setState({totalData:data}) _this.setState({totalNum:data.array.length}) //计算总页数= 总记录数 / 每页显示的条数 let totalPage =Math.ceil( _this.state.totalNum / _this.state.pageSize); _this.setState({totalPage:totalPage}) _this.pageClick(1); }) } //点击翻页pageClick(pageNum){ let _this = this; if(pageNum != _this.state.current){ _this.state.current = pageNum } _this.state.indexList=[];//清空之前的数据 for(var i = (pageNum - 1) * _this.state.pageSize; i< _this.state.pageSize * pageNum; i++){ if(_this.state.totalData.array[i]){ _this.state.indexList.push(_this.state.totalData.array[i]) } } _this.setState({indexList:_this.state.indexList}) //console.log(_this.state.indexList) }//下一步goNext(){ var _this = this; let cur = _this.state.current; //alert(cur+"==="+_this.state.totalPage) if(cur < _this.state.totalPage){ _this.pageClick(cur + 1); }}//跳转到指定页goSwitchChange(e){ var _this= this; _this.setState({goValue : e.target.value}) var value = e.target.value; //alert(value+"==="+_this.state.totalPage) if(!/^[1-9]\d*$/.test(value)){ alert('页码只能输入大于1的正整数'); }else if(parseInt(value) > parseInt(_this.state.totalPage)){ alert('没有这么多页'); }else{ _this.pageClick(value); }}render(){ return(
语文
数学
英语
{ this.state.indexList.map(function(data){ return(
{data.scoreChinese}
{data.scoreMath}
{data.scoreEnglish}
) }) }
)}}export default Pagination
子组件pageComponent.jsx
import React, { Component } from 'react';class PageComponent extends Component{ render(){ let _this = this; //当前页码 let cur = this.props.current; //显示分页按钮 let pageNum = []; let begin; let len; if(_this.props.totalPage > 5){ len = 5; if(cur >= (_this.props.totalPage-2)){ begin = _this.props.totalPage - 4; }else if(cur <= 3){ begin = 1; }else{ begin = cur - 2; } }else{ len = _this.props.totalPage; begin = 1; } //根据返回的总记录数计算当前页显示的数据 for(let i = 0; i < len; i ++){ let cur = this.props.current; let showI = begin + i; if(cur == showI){ pageNum.push({num : showI, cur : true}); }else{ pageNum.push({num : showI, cur : false}); } } return(
{ pageNum.map(function(curPageNum){ return({curPageNum.num} ) }) }
总共
{_this.props.total} 条， 共
{_this.props.totalPage} 页，到第
页
) }}export default PageComponent
mock模拟的数据mockApi.js
import Mock from 'mockjs';//首页自定义数据接口 采用array的方式module.exports = { getIndexList(){ var template ={ "array|1-20":[ { 'scoreChinese|+1':[ '70' ], 'scoreMath|+1':[ '90' ], 'scoreEnglish|+1':[ '80' ] } ] } Mock.mock(/\.json/,template) }}
分页效果显示：
详细Demo下载地址：
