如何限制 React 中分页显示的页数？

Question

我正在使用 MERN 堆栈开发 Web 应用程序。我已经使用 React & Bootstrap 实现了分页。

我想要什么？ 目前，我的数据集有限。因此，分页中显示的页数是可管理的。但是使用更大的数据集，我应该能够限制分页中显示的页数。我正在寻找的结果是在站点www.flanker.net 上实现的分页。

以下是我的代码 sn-ps。 components/Movies.js

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import MoviesTable from "./MoviesTable";
import { fetchMovies } from "./moviesSlice";
import "./Movies.css";
import Pagination from "./common/Pagination";
import { paginate } from "./../utils/paginate";

const Movies = () => {
  const [pageSize, setPageSize] = useState(4);
  const [currentPage, setCurrentPage] = useState(1);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMovies());
  }, [dispatch]);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };
  const handlePreviousClick = () => {
    setCurrentPage(currentPage - 1);
  };
  const handleNextClick = () => {
    setCurrentPage(currentPage + 1);
  };

  const { status, movies } = useSelector((state) => state.movies);

  const paginatedMovies = paginate(movies, currentPage, pageSize);

  let content;

  if (status === "loading") {
    content = (
      <div className="spinner">
        <div className="spinner-border text-success">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    );
  } else {
    content = (
      <div className="row">
        <div className="col-xs-10 col-md-8 mx-auto mt-3">
          {paginatedMovies.length > 0 ? (
            <MoviesTable movies={paginatedMovies} />
          ) : null}
          <Pagination
            itemsCount={movies.length}
            pageSize={pageSize}
            currentPage={currentPage}
            onPageChange={handlePageChange}
            onPreviousClick={handlePreviousClick}
            onNextClick={handleNextClick}
          />
        </div>
      </div>
    );
  }

  return <>{content}</>;
};

export default Movies;

components/pagination.js

import React from "react";
import _ from "lodash";

const Pagination = ({
  itemsCount,
  pageSize,
  onPageChange,
  currentPage,
  onPreviousClick,
  onNextClick,
}) => {
  const pageCount = Math.ceil(itemsCount / pageSize);
  if (pageCount === 1) return null;
  const pages = _.range(1, pageCount + 1);

  return (
    <nav aria-label="Page navigation example">
      <ul className="pagination">
        {currentPage !== 1 && (
          <li class="page-item">
            <a
              className="page-link"
              style={{ cursor: "pointer" }}
              onClick={onPreviousClick}
            >
              Previous
            </a>
          </li>
        )}
        {pages.map((page) => (
          <li
            key={page}
            className={page === currentPage ? "page-item active" : "page-item"}
          >
            <a
              style={{ cursor: "pointer" }}
              className="page-link"
              onClick={() => onPageChange(page)}
            >
              {page}
            </a>
          </li>
        ))}
        {currentPage !== pageCount && (
          <li class="page-item">
            <a
              className="page-link"
              style={{ cursor: "pointer" }}
              onClick={onNextClick}
            >
              Next
            </a>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Pagination;

src/utils/paginate.js

import _ from "lodash";

export function paginate(items, pageNumber, pageSize) {
  const startIndex = (pageNumber - 1) * pageSize;
  return _(items).slice(startIndex).take(pageSize).value();
}

我在互联网上进行了一些研究，但找不到解决方案。我不知道从哪里开始。我将不胜感激。

Answer 1

我有同样的问题，我用这个算法解决了它们：

     handleClick(event) {
            this.TotalPage();
            this.setState({
                currentPage: Number(event.target.id)
            });
        }

 const pageNumbers = 10;
 ShowPaginationNumbers(pageNumbers) {

    let paginationNumbers = [];

    if (pageNumbers) {
        let showMax = 3;
        let endPage;
        let startPage;

        if (pageNumbers <= showMax) {
            startPage = 1;
            endPage = pageNumbers.length;
        }
        else {
            startPage = this.state.currentPage;
            if (startPage != pageNumbers.length && (startPage + 1) != pageNumbers.length) {
                endPage = this.state.currentPage + showMax - 1;
            }
            else {
                endPage = pageNumbers.length;
            }
        }
        for (let i = startPage; i <= endPage; i++) {
            paginationNumbers.push(i);
        }
        return this.ShowRenderPageNumbers(paginationNumbers); 
    }
}


    ShowRenderPageNumbers(paginationNumbers) {

        if (paginationNumbers) {
          let result = paginationNumbers.map(number => {
                return (
                    <li className="page-item" >
                        <a className={(this.state.currentPage === number ? ' active' : '') + ' page-link'} key={number} id={number} onClick={this.handleClick}>{number}</a>
                    </li>
                );
          });
            return result;
        }
    }