一款简单的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(      
<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)  
  }
}

分页效果显示：

详细Demo下载地址：

• https://github.com/Silence11/...