父组件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(
<div>
<table class="table table-bordered">
<thead>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
{
this.state.indexList.map(function(data){
return( <tr>
<td>{data.scoreChinese}</td>
<td>{data.scoreMath}</td>
<td>{data.scoreEnglish}</td>
</tr>
)
})
}
</tbody>
</table>
<PageComponent total={this.state.totalNum}
current={this.state.current}
totalPage={this.state.totalPage}
goValue={this.state.goValue}
pageClick={this.pageClick.bind(this)}
goPrev={this.goPrevClick.bind(this)}
goNext={this.goNext.bind(this)}
switchChange={this.goSwitchChange.bind(this)}/>
</div>
)}
}
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(
<div>
<div className="paginationDiv">
<a className={this.props.current == 1? 'prev disable' : 'prev'} onClick={this.props.goPrev.bind(this)}></a>
<span>
{
pageNum.map(function(curPageNum){
return(<a onClick = {_this.props.pageClick.bind(_this,curPageNum.num)} className={curPageNum.cur ? 'num current' : 'num'}>{curPageNum.num}</a>) })
}
</span>
<a className={this.props.current == this.props.total? 'next disable' : 'next'} onClick={this.props.goNext.bind(this)}></a>
<div className="rightDiv">
总共<span className="num-total">{_this.props.total}</span>条， 共 <span className="num-total"> {_this.props.totalPage}</span>页，到第 <input type="text" value={_this.props.goValue} onChange= {this.props.switchChange.bind(this)} />页
</div>
</div>
</div>
)
}
}
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)
}
}
分页效果显示：
result.png
