react antd 自定义Pagination 分页功能

最新推荐文章于 2025-05-19 14:03:35 发布

玉林路扛把子

最新推荐文章于 2025-05-19 14:03:35 发布

阅读量2.4w

点赞数

CC 4.0 BY-SA版权

分类专栏： react Antd 文章标签： react antd 分页 Pagination

本文链接：https://blog.youkuaiyun.com/qq_29819449/article/details/80507006

react 同时被 2 个专栏收录

19 篇文章

订阅专栏

Antd

4 篇文章

订阅专栏

本文介绍如何使用 Ant Design 的 Pagination 组件实现自定义分页功能，通过具体代码示例展示如何设置每页显示数量、当前页数，并提供分页操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd 自定义Pagination 分页功能,研究明白其实看着很简单主要就是slice((pagenum-1)*pageSize,(pagenum-1)*pageSize+pageSize)

 {objlistdata.slice((pagenum-1)*pageSize,(pagenum-1)*pageSize+pageSize).map((item,index)=>{
            return(
               <ContentList data={item.data} 
               key={item.id}
               id={item.id}
               hasicon={item.iconurl==""?false:true} 
               optiondata={item.optiondata} 
               iconurl={item.iconurl}
               checkboxcheack={item.checkboxcheack}
               optionClick={this.optionClick}
               CheckboxonChange={this.CheckboxonChange}/>
              )
          })
          }
           <Pagination 
            size="small"
            current={pagenum}
             pageSize={pageSize}
             defaultPageSize={pageSize}
            total={objlistdata.length}
             pageSizeOptions={["5","10","15","20"]}
             onChange={this.changeNum}
             onShowSizeChange={this.changePageSize}
             showSizeChanger
             showTotal={(e)=>{return "共 "+e+" 条"}}
            />