React后台管理系统- rc-pagination分页组件封装

React后台管理系统- rc-pagination分页组件封装

1.用户列表页面使用的rc-pagination分页组件

      Github地址: https://github.com/react-component/pagination

2.安装

     cnpm install --save-dev rc-pagination

3.引入

1. import React from 'react';
2. import RcPagination from 'rc-pagination';
3. import 'rc-pagination/dist/rc-pagination.min.css';

4.封装成组件，在util里边新建文件夹Pagination,里边新建 index.jsx

1. import React from 'react';
2. import RcPagination from 'rc-pagination';
3. import 'rc-pagination/dist/rc-pagination.min.css';
4.  
5.  class Pagination extends React.Component{
6.     constructor(props){
7.         super(props);
8.     }
9.     render(){
10.         return(
11.            <div className="row">
12.               <div className="col-md-12">
13.                   <RcPagination {...this.props}
14.                        hideOnSinglePage
15.                        showQuickJumper/>
16.               </div>
17.            </div>
18.         );
19.     }
20.  }

5.使用， Pagination组件里边要传入两个参数，一是current 当前页，二是total总记录数， pageSize每一页的记录数量默认为10

1. import Pagination from 'util/pagination/index.jsx';
2.  
3.   <Pagination current={this.state.pageNum}
4.                 total={this.state.total}
5.                 onChange={(pageNum) => {this.onPageNumChange(pageNum)}}/>

6.Pagination组件里边可以定义onchange事件, Function(current, pageSize) ,参数是当前页current和pageSizeme每页的记录数

查看全文