一款简单的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}
                       
                         
     
     
       
            
 
  
  )}
}
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下载地址：

https://github.com/Silence11/reactPagination