Javascript 如何限制React中分页显示的页数?
我正在使用MERN stack开发一个web应用程序。我已经使用React和Bootstrap实现了分页。 我想要什么? 目前,我的数据集有限。因此,分页中显示的页数是可管理的。但是如果数据集更大,我应该能够限制分页中显示的页数。我正在寻找的结果是在站点上实现分页。 下面是我的代码片段。 组件/Movies.jsJavascript 如何限制React中分页显示的页数?,javascript,reactjs,bootstrap-4,pagination,Javascript,Reactjs,Bootstrap 4,Pagination,我正在使用MERN stack开发一个web应用程序。我已经使用React和Bootstrap实现了分页。 我想要什么? 目前,我的数据集有限。因此,分页中显示的页数是可管理的。但是如果数据集更大,我应该能够限制分页中显示的页数。我正在寻找的结果是在站点上实现分页。 下面是我的代码片段。 组件/Movies.js import React, { useState, useEffect } from "react"; import { useDispatch, useSel
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;
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;
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;
}
}
handleClick(事件){
this.TotalPage();
这是我的国家({
当前页面:编号(event.target.id)
});
}
常量页码=10;
显示页码(页码){
让分页编号=[];
如果(页码){
设showMax=3;
让我们结束页;
让我们开始吧;
如果(页码)