react-web-pagination

介绍

使用react做的分页组件

安装

    npm install react-web-pagination

API

参数	说明	类型	默认值
current	当前页数	number	无
pageSize	每页条数	number	10
pageSizeOptions	指定每页可以显示多少条	int[]	[10,20,30,40]
showQuickJumper	是否可以快速跳转至某页	boolean	false
showSizeChanger	是否可以改变 pageSize	boolean	false
showTotal	是否显示总item	boolean	false
total	数据总数	number	0
onChange	页码改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)	无

Auto Play效果

用法

import React, { Component } from "react";
import Pagination from "react-web-pagination";

class App extends Component {
  onChange(page,pageSize){
    console.log(page,pageSize)
  }
  render() {
    return (
      <div style={{ height: 200, width: "100%" ,padding:50}}>
        <Pagination total={100} pageSize={10} onChange={(page,pageSize)=>this.onChange(page,pageSize)} showSizeChanger showQuickJumper showTotal/>
      </div>
    );
  }
}

export default App;