Antd 表格数据分页展示

分页组件代码

render(){
    const {total,size,currenPage} = this.state  // 参数分别为数据总条数、每页数据条数、当前页页码
    return (
         // 渲染分页组件
         <Pagination size="small" total={total}
          showTotal= {this.showTotal} defaultPageSize={size}
          onChange={(page)=>this.pageChange(page)}
          current={currenPage} />
    )
}

用到的回调函数

showTotal=(total)=> {
   return `共 ${total} 条`;
}
// 点击上、下页时，触发此函数
pageChange =(val)=>{
   // 每页数据条数
  const {size} = this.state
  console.log('+++++page',val)
  this.setState({
    // 设置当前页
    currenPage:val
  })
  // 数据初始化函数，向后台请求数据
  this.init(val,size)
}