父組件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 : [], //獲取數(shù)據(jù)的存放數(shù)組

totalNum:'',//總記錄數(shù)

totalData:{},

current: 1, //當(dāng)前頁(yè)碼

pageSize:5, //每頁(yè)顯示的條數(shù)5條

goValue:'',

totalPage:'',//總頁(yè)數(shù)

}

}

componentWillMount(){

var _this = this;//如果不定義就會(huì)出現(xiàn)作用域的問(wèn)題this.setState不是一個(gè)函數(shù)

//使用mock模擬數(shù)據(jù)

$.ajax({

url:MockApi.getIndexList()+/\/\.json/, dataType:'json',

}).done(function(data){

_this.setState({totalData:data})

_this.setState({totalNum:data.array.length})

//計(jì)算總頁(yè)數(shù)= 總記錄數(shù) / 每頁(yè)顯示的條數(shù)

let totalPage =Math.ceil( _this.state.totalNum / _this.state.pageSize);

_this.setState({totalPage:totalPage})

_this.pageClick(1);

})

}

//點(diǎn)擊翻頁(yè)

pageClick(pageNum){

let _this = this;

if(pageNum != _this.state.current){

_this.state.current = pageNum

}

_this.state.indexList=[];//清空之前的數(shù)據(jù)

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);

}}

//跳轉(zhuǎn)到指定頁(yè)

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('頁(yè)碼只能輸入大于1的正整數(shù)');

}else if(parseInt(value) > parseInt(_this.state.totalPage)){

alert('沒(méi)有這么多頁(yè)');

}else{

_this.pageClick(value);

}}

render(){

return(

語(yǔ)文數(shù)學(xué)英語(yǔ)

{

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;

//當(dāng)前頁(yè)碼

let cur = this.props.current;

//顯示分頁(yè)按鈕

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;

}

//根據(jù)返回的總記錄數(shù)計(jì)算當(dāng)前頁(yè)顯示的數(shù)據(jù)

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}頁(yè)，到第 頁(yè)

)

}

}

export default PageComponent

mock模擬的數(shù)據(jù)mockApi.js

import Mock from 'mockjs';

//首頁(yè)自定義數(shù)據(jù)接口 采用array的方式

module.exports = {

getIndexList(){

var template ={

"array|1-20":[

{

'scoreChinese|+1':[

'70'

],

'scoreMath|+1':[

'90'

],

'scoreEnglish|+1':[

'80'

]

}

]

}

Mock.mock(/\.json/,template)

}

}

分頁(yè)效果顯示：

result.png

詳細(xì)Demo下載地址：

總結(jié)

以上是生活随笔為你收集整理的react ajax 分页,一款简单的react分页组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。