javascript - 如何限制 React 中分页显示的页数?
问题描述
我正在使用 MERN 堆栈开发 Web 应用程序。我已经使用 React & Bootstrap 实现了分页。
我想要什么? 目前,我的数据集有限。因此,分页中显示的页数是可管理的。但是使用更大的数据集,我应该能够限制分页中显示的页数。我正在寻找的结果是在网站www.flanker.net上实现的分页。
以下是我的代码片段。 组件/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;
组件/分页.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();
}
我在互联网上做了一些研究,但找不到解决方案。我不知道从哪里开始。我将不胜感激任何帮助。
解决方案
我有同样的问题,我用这个算法解决了它们:
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;
}
}
推荐阅读
- python-3.x - python:同时运行两个带参数的脚本
- unity3d - 从单独的沉浸式游戏加载统一 webgl 游戏
- python - 如何替换具有特定文本的行
- java - 如何创建具有两个 Java 应用程序和 Mysql 服务器的 docker 容器?
- html - 如何在 html 标签中显示从数据库中提取的数据?
- sorting - Delphi Radix Sort 支持负整数
- c++ - 嵌套类的访问说明符有什么用途?
- flutter - 是否可以更改默认的 Flutter 闪屏过渡?
- sql - 比较查找长途航班的日期和时间
- typescript - 汇总构建打字稿错误“意外令牌”