React —— antd Table组件 分页Pagination

Posted 2021-04-24 ArchieCMS

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+" 条"}}
            />