如何在反应js中将分页应用于动态表答案

【问题标题】：how to apply pagination to a dynamic table in react js如何在反应js中将分页应用于动态表
【发布时间】：2019-09-30 04:34:54
【问题描述】：

我正在尝试将分页应用于通过从 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 个用户。

表格是这样的-

【问题讨论】：

与对卡片列表进行分页有何不同？
how to implement Pagination in reactJs的可能重复
@trixn 不同的是，当我们转到下一页时，表格的标题也会随着数据消失。我希望每次页面更改时都有表格标题。
@MrigankShekharShringi 当然，您只能对表格正文中的元素进行分页。我不明白这应该如何影响标题。

标签： javascript reactjs twitter-bootstrap jsx

【解决方案1】：

你可以使用react-paginatehttps://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'}
    />

【讨论】：