react ajax 分页,一款简单的react分页组件

父组件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}

)

})

}

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)}/>

)}

}

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)

}

}

分页效果显示：

result.png

详细Demo下载地址：