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.            
12.               
13.                   this.props}
14.                        hideOnSinglePage
15.                        showQuickJumper/>
16.               

           

        );

    }

 }

 

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

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

 

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

posted on 2018-06-26 17:01 gisery 阅读( ...) 评论( ...) 编辑 收藏