父組件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)前頁碼
pageSize:5, //每頁顯示的條數(shù)5條
goValue:'',
totalPage:'',//總頁數(shù)
}
}
componentWillMount(){
var _this = this;//如果不定義就會出現(xiàn)作用域的問題this.setState不是一個函數(shù)
//使用mock模擬數(shù)據(jù)
$.ajax({
url:MockApi.getIndexList()+/\/\.json/, dataType:'json',
}).done(function(data){
_this.setState({totalData:data})
_this.setState({totalNum:data.array.length})
//計算總頁數(shù)= 總記錄數(shù) / 每頁顯示的條數(shù)
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=[];//清空之前的數(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)到指定頁
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的正整數(shù)');
}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>數(shù)學(xué)</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;
//當(dāng)前頁碼
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;
}
//根據(jù)返回的總記錄數(shù)計算當(dāng)前頁顯示的數(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(
<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模擬的數(shù)據(jù)mockApi.js
import Mock from 'mockjs';
//首頁自定義數(shù)據(jù)接口 采用array的方式
module.exports = {
getIndexList(){
var template ={
"array|1-20":[
{
'scoreChinese|+1':[
'70'
],
'scoreMath|+1':[
'90'
],
'scoreEnglish|+1':[
'80'
]
}
]
}
Mock.mock(/\.json/,template)
}
}
分頁效果顯示：
result.png
