Reactjs-Pagination React 的本地分页组件 项目简介
Reactjs-Pagination是一个React的本地分页组件,支持页码、跳转、和迷你模式。文档安装npm install --save reactjs-pagination使用示例代码:import React, { Component } from 'react';
import { Pagination }from 'reactjs-pagination';
class Test extends Component {
state = {
totalNumber: 326,
pageSize: 10,
currentPage: 31
};
constructor(props) {
super(props);
setTimeout(() => {
// this.setState({
// currentPage: 15
// });
this.setState({
totalNumber: 125
});
}, 3000);
}
handleChange = (idx) => {
console.log('页码改变 => ', idx);
}
render() {
const { totalNumber, pageSize, currentPage } = this.state;
return (
<div>
<Pagination
totalNumber={totalNumber}
pageSize={pageSize}
currentPage={currentPage}
middlePage={5}
onChange={this.handleChange}
showPages
showGo
/>
</div>
)
}
}
import { Pagination }from 'reactjs-pagination';
class Test extends Component {
state = {
totalNumber: 326,
pageSize: 10,
currentPage: 31
};
constructor(props) {
super(props);
setTimeout(() => {
// this.setState({
// currentPage: 15
// });
this.setState({
totalNumber: 125
});
}, 3000);
}
handleChange = (idx) => {
console.log('页码改变 => ', idx);
}
render() {
const { totalNumber, pageSize, currentPage } = this.state;
return (
<div>
<Pagination
totalNumber={totalNumber}
pageSize={pageSize}
currentPage={currentPage}
middlePage={5}
onChange={this.handleChange}
showPages
showGo
/>
</div>
)
}
}