如何解决反应分页-当页面超过一定数量时隐藏页面框
我想做类似下面的事情。
当页码超过一定数量时,
有些页面隐藏并显示为[...],如下所示。
箭头的作用与下面的链接相同,例如当我的页面是5时,显示1 ... 4 5 6 ... 10
https://material-ui.com/zh/components/pagination/
App.js
const paginate = (pageNumber) => {
setCurrentPage(pageNumber);
}
<Pagination postsPerPage={imagePerPage} totalPosts={totalImages} paginate={paginate}/>
Pagination.js
import React,{ useState,useRef,useEffect,useContext } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
const Pagination = ({ postsPerPage,totalPosts,paginate }) => {
const pageNumbers = [];
const [currentPage,setCurrentPage] = useState(1);
for (let i = 1; i <= Math.ceil(totalPosts /postsPerPage); i++) {
pageNumbers.push(i);
}
const totalNumOfPages = pageNumbers.length;
useEffect(() => {
console.log("Cureent Page:")
console.log(currentPage);
},[currentPage]);
return (
<nav>
<ul className='pagination' style={{width:'100%' }}>
<li class="page-item" style={{marginLeft:'auto'}}>
<a class="page-link" aria-label="Previous"
onClick={() =>{
if (currentPage > 1){
paginate(currentPage-1);
setCurrentPage(currentPage-1);
}
}
}
>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
{pageNumbers.map(number => (
<li key={number}
className={ `page-item ${(currentPage === number)? 'active' : '' }`}>
<a onClick={() =>{ paginate(number);setCurrentPage(number)}} className='page-link' >
{number}
</a>
</li>
))}
<li class="page-item" style={{marginRight:'auto'}}>
<a class="page-link" aria-label="Next"
onClick={() =>{
if (currentPage < totalNumOfPages){
paginate(currentPage+1);
setCurrentPage(currentPage+1);
}
}
}
>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
);
};
export default Pagination;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。