[英]how to apply pagination to a dynamic table in react js
我正在尝试将分页应用于通过从 API 获取数据创建的动态表。 我在从相同数据创建引导卡时应用了分页,但在创建表时我不知道如何执行此操作。
这是我要应用分页的代码-
render(){
return(
<div className='container'>
<table className='table table-striped'>
<thead>
<tr>
<th>User_Id</th>
<th>User_Name</th>
<th>Email</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_id}</td>
<td>{card.user_name}</td>
<td>{card.email}</td>
<td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
) })}
</tbody>
</table>
</div>
)
}
现在,我有 20 个用户在桌子上,我想每页只显示 5 个用户。
桌子看起来像这样-
您可以使用react-paginate
https://www.npmjs.com/package/react-paginate
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.