react实现分页组件__带页码

react实现分页组件__带页码

1.1 组件介绍

• 很感谢你能抽出时间来看这篇文章，希望我们能一起进步！
  组件通过props接受参数，并输出内容

<PageButton total={data.total} curPage={data.curPage} howMany={data.howMany}/>

• 在父组件中，从服务器端拿到的数据总条数total，每页显示条数howMany，和当前页码curPage通过props传递给PageButton 组件
• 不知道如何从服务器数据获取数据的，推荐个软件 charles 下载和用法就自行百度了；还有个方法是从https://www.mocky.io/网站在线获取，也比较方便

1.2 预览

2.PageButton组件代码

import React,{Component } from 'react';
import { Link } from 'react-router-dom';

export default class PageButton extends Component{
  constructor(props){
    super(props);
    this.state = {}
  }

  render(){
    let {howMany,total} = this.props;
    let curPage = Number(this.props.curPage);//我在这里吃过亏
    let size = 5 //页码最大显示的范围
    let totalPage = Math.ceil(total/howMany);
    let nextPage = curPage+1;
    let prePage = curPage-1;
    let pages = [];
    
    ///////////////添加首页
    if(totalPage>0){
      pages.push(<Link to="/teachers/1" className="pre" key={Math.random()*1000}>首页</Link>)
    }else{pages.push(<Link to="/teachers" className="pre" key={Math.random()*1000}>首页</Link>)}
    /////////////添加上一页
    if(prePage>0){
      pages.push(<Link to={"/teachers/" + prePage} className="pre" key={Math.random()*1000}>上一页</Link>)
    }else{pages.push(<Link to={"/teachers"} className="pre" key={Math.random()*1000}>上一页</Link>)}
    
	//////////中间页码部分
    //总页数小于等于5时,全部展示出来
    if(totalPage<=size){
      for(let i = 1;i<=totalPage;i++){
        if(curPage === i){
          pages.push(<Link to={"/teachers/" + i} className="active" key={Math.random()*1000}>{i}</Link>)
        }else{
          pages.push(<Link to={"/teachers/" + i} key={Math.random()*1000}>{i}</Link>)
        }
      }
    }else{
      for(let i = curPage - Math.floor(size/2),temp = curPage + size - Math.floor(size/2);i<temp;i++){
        //i小于等于0时不push会少一个<Link>，因此让temp加一，多循环输出一个<Link>
        if(i<=0){temp++}
        if(i > 0 && i<=totalPage){
          if(i === curPage){
            pages.push(<Link to={"/teachers/" + (i)} className="active" key={Math.random()*1000}>{i}</Link>)
          }else{
            pages.push(<Link to={"/teachers/" + (i)} key={Math.random()*1000}>{i}</Link>)
          }
        }
      }
    }
	//////////中间页码部分结束

    /////////添加下一页
    if(nextPage<=totalPage){
      pages.push(<Link to={"/teachers/" + nextPage} className="pre" key={Math.random()*1000}>下一页</Link>)
    }else{pages.push(<Link to={"/teachers"} className="pre" key={Math.random()*1000}>下一页</Link>)}
    /////////添加末页
    if(totalPage>0){
      pages.push(<Link to={"/teachers/" + totalPage} className="pre" key={Math.random()*1000}>末页</Link>)
    }else{pages.push(<Link to={"/teachers"} className="pre" key={Math.random()*1000}>末页</Link>)}

    return(
      <div>
            {pages.map(function(item,index){
              return item
            })}
      </div>
    )
  }
}

3.说明

• <Link />里面的链接地址格式需要自行调整
• 当页码到达最后一页时，前面会少两个，有兴趣的小伙伴可以完善一下，可以交流讨论，嘿嘿
  
• 样式什么的就不贴了