手动实现分页查询及解决多页隐藏问题

布满荆棘的人生 2023-10-11 15:28 59阅读 0赞

### 手动实现分页查询及解决多页隐藏问题： ###

当后台数据库的条数很多时，我们往往使用分页查询来实现分页的效果。但是也存在一定的问题，如数据量过大，那么页数会多，那么也会导致前端页面盒子溢出，用户体验差等一系列问题。针对此问题，本人实现了多页隐藏的分页功能，**未使用插件**，可直接复制粘贴使用！效果图如下：

![在这里插入图片描述][2021033014475315.gif_pic_center]

注1：下面的操作是以 Coach 进行举例，读者可根据自己项目的需求对注入的实体类进行更改。  
 注2：前端用的是 Bootstrap 框架。

--------------------

分页实体类对象：

import java.util.List;
 
 public class PageBean<T> {
 
 private int totalCount;//总记录数
 private int totalPage;//总页码
 private List<T> list;//每页的数据
 private int currentPage;//当前页码
 private int rows;//每页显示的记录数
 
 public int getTotalCount() {
 
 return totalCount;
 }
 
 public void setTotalCount(int totalCount) {
 
 this.totalCount = totalCount;
 }
 
 public int getTotalPage() {
 
 return totalPage;
 }
 
 public void setTotalPage(int totalPage) {
 
 this.totalPage = totalPage;
 }
 
 public List<T> getList() {
 
 return list;
 }
 
 public void setList(List<T> list) {
 
 this.list = list;
 }
 
 public int getCurrentPage() {
 
 return currentPage;
 }
 
 public void setCurrentPage(int currentPage) {
 
 this.currentPage = currentPage;
 }
 
 public int getRows() {
 
 return rows;
 }
 
 public void setRows(int rows) {
 
 this.rows = rows;
 }
 
 @Override
 public String toString() {
 
 return "PageBean{" +
 "totalCount=" + totalCount +
 ", totalPage=" + totalPage +
 ", list=" + list +
 ", currentPage=" + currentPage +
 ", rows=" + rows +
 '}';
 }
 }

--------------------

Controller层：

@Controller
 @RequestMapping("/admin/coach")
 public class CoachController {
 
 	
 	@Autowired
 private CoachService coachService;
 
 	@RequestMapping("/findByPage")
 	public String findByPage(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
 
 	 //1.设置编码
 	 request.setCharacterEncoding("utf-8");
 	 
 	 //2. 获取参数
 	 String currentPage = request.getParameter("currentPage");//当前页码数
 	 String rows = request.getParameter("rows");//每页显示条数
 	
 	 //默认情况下为第一页且每页显示20行
 	 if(currentPage==null||"".equals(currentPage)){
 
 	 currentPage = "1";
 	 }
 	 if(rows==null || "".equals(rows)){
 
 	 rows="20";
 	 }
 	
 	 //3.调用方法
 	 PageBean<Coach> pageBean = coachService.findByPage(Integer.parseInt(currentPage), Integer.parseInt(rows));
 	
 	 //4.将PageBean存入request
 	 request.setAttribute("pb", pageBean);
 	
 	 //5.转发到coachManagement.jsp
 	 return "admin/coachManagement";
 	}
 }

--------------------

Service层：

@Service("coachService")
 public class CoachServiceImpl implements CoachService {
 
 
 @Autowired
 private CoachDao coachDao;
 
 @Override
 public PageBean<Coach> findByPage(Integer currentPage, Integer rows) {
 
 //1. 创建空的PageBean
 PageBean<Coach> pageBean = new PageBean<Coach>();
 
 //2. 查询总的记录条数
 int totalCount = coachDao.findTotalCount();
 pageBean.setTotalCount(totalCount);
 
 //3.计算页码数
 int totalPage = (totalCount % rows == 0) ? totalCount / rows : (totalCount / rows + 1);
 pageBean.setTotalPage(totalPage);
 
 if(currentPage>totalPage){
 //判断如果当前查询的页码数大于总的页码数，则当前页码为总的页码数
 currentPage = totalPage;
 }
 
 //4.设置当前页码数与每页条数
 pageBean.setCurrentPage(currentPage);
 pageBean.setRows(rows);
 
 //5.查询当前页的数据
 int start = (currentPage-1)*rows;
 if(totalCount == 0){
 
 start = 0;
 }
 List<Coach> list = coachDao.findByPage(start, rows);
 pageBean.setList(list);
 
 return pageBean;
 }
 }

--------------------

Dao层：

@Repository
 public interface CoachDao {
 
 
 @Select("select count(*) from coach")
 int findTotalCount();
 
 @Select("select * from coach limit #{start}, #{rows} ")
 List<Coach> findByPage(@Param("start") int start, @Param("rows") int rows);
 }

--------------------

前端jsp：

<div id="page-bean">
 	<nav aria-label="">
 		<ul class="pagination" style="float: right">
 			<%--首页、上一页--%>
 			<%--第一页--%>
 			<c:if test="${pb.currentPage==1}">
 				<li class="disabled"><a aria-label="Previous">
 						  
 				</a></li>
 				<li class="disabled"><a aria-label="Previous">
 						  
 				</a></li>
 			</c:if>
 			<%--不是第一页--%>
 			<c:if test="${pb.currentPage!=1}">
 				<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=1&rows=20" aria-label="Previous">
 						  
 				</a></li>
 				<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${pb.currentPage-1}&rows=20" aria-label="Previous">
 						  
 				</a></li>
 			</c:if>
 
 			<%--数字分页--%>
 
 			<%--页码小于5页则显示所有--%>
 			<c:if test="${pb.totalPage<=5}">
 				<c:forEach begin="1" end="${pb.totalPage}" var="i">
 					<c:if test="${pb.currentPage == i}">
 						<li class="active"><a>${
 i} (current)</a></li>
 					</c:if>
 					<c:if test="${pb.currentPage != i}">
 						<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${i}&rows=20">${
 i}(current)</a></li>
 					</c:if>
 				</c:forEach>
 			</c:if>
 			<%--页码大于5页--%>
 			<c:if test="${pb.totalPage>5}">
 				<%--当前页+（5-2）<= 总页码--%>
 				<c:if test="${pb.currentPage+3 <= pb.totalPage}">
 					<%--当前页码为1或者2--%>
 					<c:if test="${pb.currentPage==1|| pb.currentPage==2}">
 						<c:forEach begin="1" end="5" var="i">
 							<c:if test="${pb.currentPage == i}">
 								<li class="active"><a>${
 i} (current)</a></li>
 							</c:if>
 							<c:if test="${pb.currentPage != i}">
 								<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${i}&rows=20">${
 i}(current)</a></li>
 							</c:if>
 						</c:forEach>
 					</c:if>
 					<%--当前页码不为1、2--%>
 					<c:if test="${pb.currentPage!=1 && pb.currentPage!=2}">
 						<c:forEach begin="${pb.currentPage-2}" end="${pb.currentPage+2}" var="i">
 							<c:if test="${pb.currentPage == i}">
 								<li class="active"><a>${
 i} (current)</a></li>
 							</c:if>
 							<c:if test="${pb.currentPage != i}">
 								<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${i}&rows=20">${
 i}(current)</a></li>
 							</c:if>
 						</c:forEach>
 					</c:if>
 				</c:if>
 				<%--当前页+（5-2）> 总页码--%>
 				<c:if test="${pb.currentPage+3 > pb.totalPage}">
 					<c:forEach begin="${pb.totalPage-4}" end="${pb.totalPage}" var="i">
 						<c:if test="${pb.currentPage == i}">
 							<li class="active"><a>${
 i} (current)</a></li>
 						</c:if>
 						<c:if test="${pb.currentPage != i}">
 							<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${i}&rows=20">${
 i}(current)</a></li>
 						</c:if>
 					</c:forEach>
 				</c:if>
 			</c:if>
 
 			<%--最后一页、下一页--%>
 			<c:if test="${pb.currentPage==pb.totalPage}">
 				<li class="disabled"><a aria-label="Previous">
 						  
 				</a></li>
 				<li class="disabled"><a aria-label="Previous">
 						  
 				</a></li>
 			</c:if>
 			<c:if test="${pb.currentPage!=pb.totalPage}">
 				<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${pb.currentPage+1}&rows=20" aria-label="Previous">
 						  
 				</a></li>
 				<li class=""><a href="${pageContext.request.contextPath}/admin/coach/findByPage?currentPage=${pb.totalPage}&rows=20" aria-label="Previous">
 						  
 				</a></li>
 			</c:if>
 		</ul>
 	</nav>
 </div>

--------------------

总体效果图：

![在这里插入图片描述][20210330152242215.gif_pic_center]

欢迎大家在评论区留言哦 ~

[2021033014475315.gif_pic_center]: https://img-blog.csdnimg.cn/2021033014475315.gif#pic_center
[20210330152242215.gif_pic_center]: https://img-blog.csdnimg.cn/20210330152242215.gif#pic_center