Как сделать пагинацию из объекта массива с помощьюactjs

Question

У меня есть данные в этой ссылке, я хочу разместить только 10 индексов на каждой странице и сделать нумерацию страниц для других данных. чтобы увидеть этот массив посещение http://demo9197058.mockable.io/users

.

.

Answer 1

Чтобы подсчитать количество страниц, вам нужно определить размер страницы и поделить общее количество записей на это число.

Например, если размер вашей страницы равен 25, вы получите количество страниц, выполнив что-то вроде:

const PAGE_SIZE = 25;
const pageCount = data.length / PAGE_SIZE;

this.setState({ pageCount })

Таким образом, ваш полный код будет выглядеть примерно так:

Import ReactPaginate from 'react-paginate'

class Paginate extends Component {
    constructor() {
        super()
        this.state = { pageCount: null;
    }

    const PAGE_SIZE = 25;
    const pageCount = data.length / PAGE_SIZE;

    this.setState({ pageCount })

    render() {
        return (
        // your code goes here

         <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'}
        />
    )
}

Answer 2

import ReactPaginate from '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'}
/>