react 实现分页

分页"/>

react 实现分页

一、在state里面定义 数据集 ，每页显示的第一个和最后一个

this.state = {//数据集datasetList: [],minValue:0,maxValue:44,};

二、跳转页面后你的第一个数据的id和最后一个数据的id ，这里每页显示10条数据

handleValue = value =>{
//value分页idconsole.log(value)
//分页小于等于1就是第一页没变if(value<=1){this.setState({minValue:0,maxValue:10,});}else {this.setState({minValue:(value-1)*10,maxValue:(value-1)*10+10});}
};

三、展示，下面是我展示图片是的代码片段（用map遍历，数据集使用slice（第一个id，最后一个id）来获取数据的）

 <Row >{this.state.datasetList.slice(this.state.minValue,this.state.maxValue).map(item =>(<Card.Gridstyle={gridStyle}><Image style={{width:"100px",minHeight:"100px",maxHeight:"100px"}}alt="example"src={item.fileUrl}/><p style={{width:"100px",minHeight:"20px",maxHeight:"20px"}}><Typography.Paragraphellipsis={{ tooltip: item.fileName }}style={{ marginBottom: '1px' }}>{item.fileName}</Typography.Paragraph></p> </Card.Grid>))}</Row><br/>

四、分页

 <Pagination 
//当前页数defaultCurrent={1} 
//每页条数defaultPageSize={10} 
//数据总数total={this.state.datasetList.length} onChange={this.handleValue} >
</Pagination>

这样就可以实现分页功能了。