主要用到DetailList,具体用法可以参考:Pagination,效果图如下:
1.在上篇文章的基础上:React list数据显示(含源码)Demo,添加Pagination库的引用
import Pagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';
2.在<DetailList>下面添加<Pagination>标签
<div className="content-foot-page">
<Pagination onChange={this.pageNumberOnChange} total={this.state.allAudits.length} current={this.state.currentPage} />
</div>
3.点击page具体某页触发onChange={this.pageNumberOnChange}事件,注意别忘了bind.这里showPageNumberAudits是每一页要显示的,pageSize自己定义,我这里是10。另外<DetailList>中items属性也不能传递allAudits,而是改为showPageNumberAudits
const pageSize = 10;
pageNumberOnChange = (page) => {
let startNum = page > 0 ? (page - 1) * pageSize : 0;
let tempDisplayAudits = this.state.allAudits.slice(startNum, startNum + pageSize);
this.setState(
{
showPageNumberAudits: allAudits,
currentPage:page
}
);
}
4.在stage中添加currentPage,并且赋初值
this.state = {
columns: columns,
showPageNumberAudits: [],
allAudits: [],
title: "Page Show",
currentPage:1
};