React dva，antd中实用的分页器组件

效果图：

组件代码：

import React from 'react'

import {Pagination} from 'antd'

import styles from './index.less'

const Paginations =({total,onPageChange, onSizeChange })=>{

const onShowPageChange= (current, pageSize)=> {

onPageChange(current, pageSize)

}

const onShowSizeChange=(current, pageSize)=> {

扫描二维码关注公众号，回复： 4236182 查看本文章

onSizeChange(current, pageSize)

}

return (

<div className={styles.content}>

<Pagination

showTotal={total => `查询结果 ${total} 条`}

showSizeChanger

onChange={onShowPageChange}

onShowSizeChange={onShowSizeChange}

total={total}

/>

</div>

)

}

export default Paginations

》》》》》》》

.content{

float: right;

margin-top: 10px;

}

页面的引用分页组件：

<Pagination total={total} onPageChange={this.onHandlePageChange} onSizeChange={this.onHandleSizeChange}/>