时间戳

首页 > 解决方案 > How to Paginate a Pop Up Component in ReactJS?

reactjs - How to Paginate a Pop Up Component in ReactJS?

问题描述

I am trying to Paginate this Pop up. Can anyone tell me how I can do this using a reusable Paginate Component.

<EntityPopup
      title={constants.SELECT_SUPPLIER_HEADER}
      isOpened={this.state.isSupplierPopupOpen}
      onModalClose={this.closeSupplierPopup}
      onSelect={this.selectSupplier}
      entity={this.props.suppliers}
      columns={constants.SUPPLIER_MODAL_COLUMN_NAMES}
      emptyTableMessage={constants.NO_SUPPLIERS_MESSAGE}
    />

标签： reactjspagination

解决方案

我使用react-paginate。它非常灵活。我应用了引导类以使其看起来像引导分页器；而且我很确定它足够灵活，可以与任何框架一起使用。

这是我所做的一个例子。

<ReactPaginate
  containerClassName="pagination"
  pageClassName="page-item"
  pageLinkClassName="page-link"
  previousClassName="page-item"
  previousLinkClassName="page-link"
  nextClassName="page-item"
  nextLinkClassName="page-link"
  breakClassName="page-item"
  breakLinkClassName="page-link"
  activeClassName="active"
/>

推荐阅读