介绍

使用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;