raect 2 制作分页组件

组件效果

index.js

import PagerTest from './compoments/PagerTest'

ReactDOM.render(

  <PagerTest />,

  document.getElementById("root")
)

Pager.js

import React from "react";
import "./Pager.css";

/**
 * 分页组件
 * 属性：
 * 1. current: 初始页码
 * 2. total：总数据量
 * 3. limit：页总量，每页显示的数据量
 * 4. panelNumber： 数字页码最多现实多少个
 * 5. onPageChanger: 页码改变时间
 *
 */

export default function Pager(props) {
  const PageNumber = getPageNumber(props);//总页数
  if(PageNumber === 0) {
    return null;
   }
  const min = getMinNumber(props); 
  const max = getMaxNumber(min, PageNumber, props);
  const numbers = [];

  for (let i = min; i <= max; i++) {
    numbers.push(
      <span
      onClick={() => {
        toPage(i, props);
      }}
        key={i}
        className={i === props.current ? "item active" : "item"}
        >
        {i}
      </span>
    );
  }


  return (
    <>
      <span
        onClick={() => {
          toPage(1, props);
        }}
        className={props.current === 1 ? "item disabled" : "item"}
      >
        首页
      </span>
      <span
        onClick={() => {
          toPage(props.current - 1 < 1 ? 1 : props.current - 1, props);
        }}
        className={props.current === 1 ? "item disabled" : "item"}
      >
        上一页
      </span>
      {/* 数字页码区 */}
      {numbers}
      <span
        onClick={() => {
          toPage(
            props.current + 1 > PageNumber ? PageNumber : props.current + 1,
            props
          );
        }}
        className={props.current === PageNumber ? "item disabled" : "item"}
      >
        下一页
      </span>
      <span
        onClick={() => {
          toPage(PageNumber, props);
        }}
        className={props.current === PageNumber ? "item disabled" : "item"}
      >
        尾页
      </span>
      <span className="current">{props.current}</span>/<span>{PageNumber}</span>
    </>
  );
}

/**
 * 计算最小数字
 *
 */
function getMinNumber(props) {
  var min = props.current - Math.floor(props.panelNumber / 2);
  if (min < 1) {
    min = 1;
  }
  return min;
}

/**
 * 计算最大数字
 * @param {*} min
 * @param {*} PageNumber
 */
function getMaxNumber(min, PageNumber, props) {
  var max = min + props.panelNumber - 1;
  if (max > PageNumber) {
    max = PageNumber;
  }
  return max;
}

/**
 * 跳转到某一页
 *
 */

function toPage(targer, props) {
  if (props.current === targer) {
    return; //目标页码跟当前页码相同
  }
  props.onPageChange && props.onPageChange(targer);
}

/***
 *  计算总页数
 *
 */

function getPageNumber(props) {
  return Math.ceil(props.total / props.limit);
}

Pager.css

/**
    Pager.css
*/

.item{
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid #ccc;
    color: rgb(22, 18, 223);
    margin: 2px;
    cursor: pointer;
}

.item.disabled{
    color: #ccc;
    cursor: not-allowed;
}

.current{
    margin-left: 20px;
}

.active{
    border: none;
    color: #f40;
    cursor: auto;
}

PagetTest.js

import React, { Component } from "react";
import Pager from './Pager'

export default class PagerTest extends Component {
  state = {
    current: 3,
    total: 100,
    limit: 10,
    panelNumber: 5
  };


  handlePageChange = (newPage) => {
      this.setState({
        current: newPage
      })
  }

  render() {
    return (
        <div>
            <Pager {...this.state} onPageChange={this.handlePageChange} />
        </div>
        );
  }
}