xerxes-react-pagination

xerxes-react-pagination

• 基本介绍
  • 安装说明
  • 案例说明
  • props说明
  • events说明
  • methods说明

基本介绍

这是一个基于 react 的分页组件， 包含 总条数，左右切换，快速跳转， 条数修改等完整的功能

安装说明

运行安装命令：

  npm i -s xerxes-react-pagination or yarn add xerxes-react-pagination

案例说明

介绍了基本的使用方式

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Pagination from 'xerxes-react-pagination'
import Pagination from 'xerxes-react-pagination/lib/index.css'
import './example.css'

class App extends Component {
  state = {
    total: 50
  }
  click = () => {
    this.setState({total: this.state.total+10})
  }
  _pageChange = (num) => {
    console.log(num)
  }
  render () {
    return (
      <div className="wrapper">
        <h2>完整的分页</h2>
        <Pagination total={this.state.total} onChange={this._pageChange} />
        <button onClick={this.click}>点击</button>
        <h2>设置组件布局选项</h2>
        <Pagination total={400} 
        layout="pager, total"
        onChange={this._pageChange} />
        <button onClick={this.click}>点击</button>
      </div>
    )
  }
}

props说明

属性	类型	默认值	可选值	描述
total	Number	❌	--	初始化时数据的总条数
currentPage	Number	1	---	当前激活的页数
pageSize	Number	10	---	当前页显示的条数
pageSizes	Array	[10, 20, 30, 40]	---	每页显示个数选择器的选项设置
layout	Array	'pager, jumper, total'	pager, jumper, total	组件布局， 子组件名用逗号分隔

events说明

事件名称	回调参数	事件说明
onSizeChange	每页条数 size	pageSize 改变时触发
onCurrentChange	当前页 currentPage	currentPage 改变时触发

methods说明

| 方法名称 | 方法说明 | 参数说明 | | :------ | :------- | | setCurrentPage | 设置当前页 | 范围内的页数 |