一款簡單的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/...