1.0.3 • Published 6 years ago
ue-pagination v1.0.3
Usage
import Pager from 'ue-pagination';
参数说明
参数 | 说明 |
---|---|
totalCount | 总共几条 |
currentPage | 当前第几页 |
pageCount | 总共几页 |
visible | 是否展示 |
handlePageChange | 点击分页按钮的回调函数 |
使用示例
import React from 'react';
class Index extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
page: {
totalCount: 2,
pageNo: 1,
pageCount: 2,
}
};
this.config = {
pageNo: 1,
pageSize: 10,
totalPage: 30,
dataSource: [],
};
}
splitPage = () => {
const currentPage = this.config.pageNo;
var startIndex = (currentPage - 1) * this.config.pageSize;
var endIndex = currentPage * this.config.pageSize;
if (currentPage > this.config.totalPage) {
return;
}
return this.config.dataSource.slice(startIndex, endIndex);
}
handlePageChange = (page) => {
this.config.pageNo = page;
const _array = this.splitPage();
this.setState({
dataSource: _array,
page: {
pageCount: this.config.totalPage,
pageNo: this.config.pageNo,
pageSize: this.config.pageSize,
totalCount: this.config.dataSource.length,
}
});
}
render() {
return (
<Pager
visible={this.state.page.totalCount > 0}
totalCount={this.state.page.totalCount}
currentPage={this.state.page.pageNo}
pageCount={this.state.page.pageCount}
handlePageChange={this.handlePageChange}
/>
)
}
}