Mybatis 数据库物理分页插件 PageHelper 前端实现

最新推荐文章于 2020-12-23 13:24:31 发布
最新推荐文章于 2020-12-23 13:24:31 发布
阅读量667 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端 mybatis 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_14965807/article/details/60140797
本文介绍如何利用MyBatis的PageHelper插件实现前后端分离的分页功能，通过示例展示了主页面与分页列表的设计方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

继上一篇文章     

Mybatis 数据库物理分页插件 PageHelper          

只是完成了 PageHelper 程序后台配置，前端的写法在这里举例，本人的菜鸟写法，欢迎大神指点。


首先，因为SpringMVC 的框架返回值是返回页面的形式，所以在分页的时候需要写两个页面，一个是列表的主页面，另一个是分页的专用页面，列表的主页面中，把列表这一部分用div包含起来，然后在分页的时候，让div 重新去加载div包起来的部分，即可实现分页，下面进行举例：


分页的主页面实例：

复制代码 
    <%@page import="com.util.sms.PaginationContext"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>  
    
    
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	response.setHeader("Pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>温馨提示</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap-theme.min.css">


<script src="bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>


<script type="text/javascript">var basePath = "<%=basePath%>";</script>


</head>


<body>






<div id="div_list">
<input id="pageNum"  style="display: none" value="${pageMum }">
<input id="pageSize"  style="display: none" value="${pageSize }">
<table class="table table-bordered">
  <thead>
  	<tr>
  		<th>姓名</th>
  		<th>年龄</th>
  		<th>小组负责人</th>
  		<th>手机号码</th>
  		<th>邮箱</th>
  		<th>学校名称</th>
  		<th>专业</th>
  		<th>学历</th>
  		<th>年级</th>
  		<th>研究经历</th>
  		<th>获奖情况</th>
  		<th>组编号</th>
  		<th>注册时间</th>
  	</tr>
  </thead>
  <tbody>
  <c:forEach var="list" items="${tsignList}">
  	<tr>
  		
  		<td>${list.memname}</td>
  		<td>${list.memage}</td>
  		<td>
  		<c:choose>
		   <c:when test="${list.isleader == '1'}">  
		        是    
		   </c:when>
		   <c:otherwise> 
		   	 否
		   </c:otherwise>
		</c:choose>
  		</td>
  		<td>${list.memphone}</td>
  		<td>${list.mememail}</td>
  		<td>${list.memschool}</td>
  		<td>${list.memmajor}</td>
  		<td>
  		<c:choose>
		   <c:when test="${list.memeducation == '1'}">  
		        本科
		   </c:when>
		   <c:when test="${list.memeducation == '2'}">  
		        硕士
		   </c:when>
		   <c:when test="${list.memeducation == '3'}">  
		        博士
		   </c:when>
		</c:choose>
  		</td>
  		<td>${list.memgrade}</td>
  		<td>${list.memexperience}</td>
  		<td>${list.memwin}</td>
  		<td>${list.groupcode}</td>
  		<td><fmt:formatDate value="${list.signdate}"   pattern="yyyy-MM-dd HH:mm:ss" type="date" dateStyle="long" />  </td>
  		
  	</tr>
  	</c:forEach>
  </tbody>
</table>






</div>


<script type="text/javascript">
//上一页
function prePage(pages){
var pageNum = $("#pageNum").val();
pageNum = Number(pageNum) -1;
	if(1>Number(pageNum)){
		pageNum = 1;
		document.getElementById("a_prePage").style.display = "none";
		document.getElementById("a_nextPage").style.display = "";
		return false;
	}else if(Number(pageNum)>1 && Number(pageNum) <Number(pages)){
		document.getElementById("a_prePage").style.display = "";
		document.getElementById("a_nextPage").style.display = "";
	}else if(1 == Number(pageNum)){
		document.getElementById("a_prePage").style.display = "none";
		document.getElementById("a_nextPage").style.display = "";
	}
	$("#div_list").html("数据正在玩命加载中......");
	$("#div_list").load("getSignListPage.do?page="+pageNum);
}
//下一页
function nextPage(pages){
var pageNum = $("#pageNum").val();
pageNum = Number(pageNum) +1;
	if(Number(pageNum) <=1){
		document.getElementById("a_nextPage").style.display = "";
		document.getElementById("a_prePage").style.display = "none";
	}else if(Number(pageNum) >1 && Number(pageNum) < Number(pages)){
		document.getElementById("a_nextPage").style.display = "";
		document.getElementById("a_prePage").style.display = "";
	}else if(Number(pageNum) == Number(pages)){
		document.getElementById("a_nextPage").style.display = "none";
		document.getElementById("a_prePage").style.display = "";
	}else if(Number(pageNum) > Number(pages)){
		pageNum = pages;
		return false;
	}
	$("#div_list").html("数据正在玩命加载中......");
	$("#div_list").load("getSignListPage.do?page="+pageNum);
}
//点击去某一个页面
function goPage(goNum,pages){
	if(Number(goNum) < 1 ){
		goNum = 1;
		document.getElementById("a_nextPage").style.display = "none";
		document.getElementById("a_prePage").style.display = "";
	}else if(Number(goNum) > 1 && Number(goNum) < Number(pages)){
		document.getElementById("a_nextPage").style.display = "";
		document.getElementById("a_prePage").style.display = "";
	}else if(Number(goNum) >=Number(pages)){
		goNum = pages;
		document.getElementById("a_nextPage").style.display = "none";
		document.getElementById("a_prePage").style.display = "";
	}else if(1 == Number(goNum)){
		document.getElementById("a_nextPage").style.display = "";
		document.getElementById("a_prePage").style.display = "none";
	}
	$("#div_list").html("数据正在玩命加载中......");
	$("#div_list").load("getSignListPage.do?page="+goNum);
}
</script>
	 <nav aria-label="Page navigation">
	  <ul class="pagination">
	    <li>
	      <a style="display: none" id="a_prePage" href="javascript:void(0);" onclick="prePage(${page.pages})"  aria-label="Previous">
	        <span aria-hidden="true">上一页</span>
	      </a>
			    </li>
			    	<c:forEach begin="1" end="${page.pages }" var="p">
			    		<li><a onclick="goPage(${p},${page.pages })"   href="javascript:void(0);" >${p}</a></li>
			    	</c:forEach>
			    <li>
	      <a id="a_nextPage" href="javascript:void(0);" onclick="nextPage(${page.pages})"  aria-label="Next">
	        <span aria-hidden="true">下一页</span>
	      </a>
	    </li>
	  </ul>
	</nav>


</body>


</html>


分页的列表页面实例：（只是把主页面的列表部分拿出来到一个新的页面，加载的时候，仅仅加载这一部分）


复制代码 
   <%@page import="com.util.sms.PaginationContext"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>  
    
    
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	response.setHeader("Pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>温馨提示</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap-theme.min.css">


<script src="bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>


<script type="text/javascript">var basePath = "<%=basePath%>";</script>


</head>


<body>




<input id="pageNum"  style="display: none" value="${pageMum }">
<input id="pageSize"  style="display: none" value="${pageSize }">
<table class="table table-bordered">
  <thead>
  	<tr>
  		<th>姓名</th>
  		<th>年龄</th>
  		<th>小组负责人</th>
  		<th>手机号码</th>
  		<th>邮箱</th>
  		<th>学校名称</th>
  		<th>专业</th>
  		<th>学历</th>
  		<th>年级</th>
  		<th>研究经历</th>
  		<th>获奖情况</th>
  		<th>组编号</th>
  		<th>注册时间</th>
  	</tr>
  </thead>
  <tbody>
  <c:forEach var="list" items="${tsignList}">
  	<tr>
  		
  		<td>${list.memname}</td>
  		<td>${list.memage}</td>
  		<td>
  		<c:choose>
		   <c:when test="${list.isleader == '1'}">  
		        是    
		   </c:when>
		   <c:otherwise> 
		   	 否
		   </c:otherwise>
		</c:choose>
  		</td>
  		<td>${list.memphone}</td>
  		<td>${list.mememail}</td>
  		<td>${list.memschool}</td>
  		<td>${list.memmajor}</td>
  		<td>
  		<c:choose>
		   <c:when test="${list.memeducation == '1'}">  
		        本科
		   </c:when>
		   <c:when test="${list.memeducation == '2'}">  
		        硕士
		   </c:when>
		   <c:when test="${list.memeducation == '3'}">  
		        博士
		   </c:when>
		</c:choose>
  		</td>
  		<td>${list.memgrade}</td>
  		<td>${list.memexperience}</td>
  		<td>${list.memwin}</td>
  		<td>${list.groupcode}</td>
  		<td><fmt:formatDate value="${list.signdate}"   pattern="yyyy-MM-dd HH:mm:ss" type="date" dateStyle="long" />  </td>
  		
  	</tr>
  	</c:forEach>
  </tbody>
</table>




</body>


</html>
复制代码
Springmvc 控制器（返回主页面的控制器）：

复制代码 
   	@RequestMapping(value="/getSignLists.do",method={RequestMethod.GET})
	@ResponseBody
	public ModelAndView getSignLists(@Param("tSign") TSign my,@RequestParam(required=true,defaultValue="1") Integer page,
            @RequestParam(required=false,defaultValue="10") Integer pageSize) 
			throws Exception{
		
		
		logger.info("查询已报名的用户方法。。start。。。");
		PaginationContext.setPageNum(page);
		PaginationContext.setPageSize(pageSize);
		ModelAndView mv = new ModelAndView();
		
		//分页操作
		PageHelper.startPage(PaginationContext.getPageNum(), PaginationContext.getPageSize());
        List<TSign> list = signService.getTSignList(my);
		
		mv.addObject("tsignList", list);
		mv.addObject("pageMum", PaginationContext.getPageNum());
		mv.addObject("pageSize", PaginationContext.getPageSize());
		mv.addObject("page", new PageBean<TSign>(list));
		mv.setViewName("signIndex");
			
		
		logger.info("查询已报名的用户方法。。end。。。");
		return mv;
		
	}
复制代码
返回分页页面的控制器：

复制代码 
    @RequestMapping(value="/getSignListPage.do",method={RequestMethod.GET})
	@ResponseBody
	public ModelAndView getSignListPage(@Param("tSign") TSign my,@RequestParam(required=true,defaultValue="1") Integer page,
            @RequestParam(required=false,defaultValue="10") Integer pageSize) 
			throws Exception{
		
		
		logger.info("查询已报名的用户方法。。start。。。");
		PaginationContext.setPageNum(page);
		PaginationContext.setPageSize(pageSize);
		ModelAndView mv = new ModelAndView();
		
		//分页操作
		PageHelper.startPage(PaginationContext.getPageNum(), PaginationContext.getPageSize());
        List<TSign> list = signService.getTSignList(my);
		
		mv.addObject("tsignList", list);
		mv.addObject("pageMum", PaginationContext.getPageNum());
		mv.addObject("pageSize", PaginationContext.getPageSize());
		mv.addObject("page", new PageBean<TSign>(list));
		mv.setViewName("signLists");
			
		
		logger.info("查询已报名的用户方法。。end。。。");
		return mv;
		
	}
复制代码

这里只是所有的代码，大家在使用可以的时候，可以进行相应的封装，以便项目中可以更好的使用。

这里只是作为记录，便于之后查看。

这里的方法比较笨拙，但是可以实现功能，欢迎大家提自己的意见，我这边会进行改进。




pageHelper分页前端实现
lzh_coder8080的博客
10-31 3427
前端框架 jquery+bootstrap+thymeleaf 后端Controller /** * 跳转日志管理页面 * * @param model * @param pageNum 第几页 * @param pageSize 页大小 * @return */ @Log(module = "日志管理", o...
PageHelper实现前端分页
06-02
使用Mabatis中的分页插件PageHelper实现分页功能，此插件使用简单加快项目的开发效率。
spring boot 和mybatis的xml使用
给变量取个名字
09-01 1049
1.在application.properties文件中添加 mybatis.config-locations=classpath:mybatis/mybatis-config.xml mybatis.mapper-locations=classpath:mybatis/mapper/*.xml 2.mybatis-config.xml配置如下
access函数_致正在备考Access的你，学习重点和题库以及b站优课请查收！
weixin_39757169的博客
11-21 150
现在就学习！请问你是否是正在为备考Access正在苦恼？或者对这个软件感兴趣？还是想屯点资料备用？一定要划到底！！以下是我整理的关于Access的好资源请各位朋友查收噢！01数据库复习重点第一章1、 信息的定义与特征2、 数据管理的阶段3、 数据库、数据库系统的定义与组成4、 数据库技术的特点5、数据模型的发展和分类6、关系数据模型的三要素及含义7、关系数据模型的四个数据完整性约...
SpringBoot 整合 PageHelper 分页查询（加前端代码）
weixin_44252186的博客
01-21 2133
1.今天写项目需要用到PageHelper 分页插件去分页，如果已经SpringBoot搭好Mybatis 的话直接跳过第二步。 2.如果没有SpringBoot没有整合Mybatis 可以参考 Eclipse + SpringBoot + Mybaits 项目整合 3.在pom.xml 引入pageHelper 依赖。 <!-- pageHelper --> &l...
IDEA: spring+mybatis+springMVC SSM框架(三) spring 整合 Mybatis 以及分页插件 PageHelper
01-27
在本项目中，我们主要探讨的是如何在IntelliJ IDEA（IDEA）环境下，整合Spring、Mybatis和SpringMVC（SSM）框架，并利用PageHelper分页插件实现高效的数据分页。以下是对这些技术及其整合过程的详细说明： 1. **...
Spring+mybatis+PageHelper分页插件
07-19
在本项目中，"Spring+mybatis+PageHelper分页插件"的组合是一个常见的Java后端开发架构，用于构建高效、便捷的数据分页功能。下面将详细解释这些技术及其结合方式。 首先，Spring是一个开源的Java应用框架，它提供...
Mybatis PageHelper(Mybatis分页插件) v5.0 最新免费版.rar
04-12
Mybatis PageHelper是一款针对Mybatis框架的高效分页插件，它极大地简化了在Mybatis中实现分页查询的复杂性。PageHelper插件通过自动处理SQL语句，实现了数据库的兼容性，支持多种主流数据库如MySQL、Oracle、DB2等...
Mybatis分页插件PageHelper使用详解
2. 当后端接口需要将大量数据返回给前端展示时，通过分页插件分批次获取数据可以减轻服务器压力，避免内存溢出或数据库超时。 3. 对于需要做数据统计分析的场景，分页插件可以帮助将大查询拆分成小查询，逐步汇总...
SSM框架下的Mybatis Pagehelper物理分页实战教程
PageHelper是一个Mybatis的分页插件，其核心功能是帮助Mybatis实现物理分页。物理分页指的是从数据库中检索出符合查询条件的一定数量的数据，通过分页算法获取特定页面的数据，而不是一次性查询出所有数据。...
PageHelper分页实例（带页面）
10-27
PageHelper分页实例（带页面），基于Spring+Mybatis+SpringMVC后台与前台分页展示，效果和过程可见博文http://blog.youkuaiyun.com/evankaka/article/details/49452201
springboot+mybatis+pagehelper、web前端到后台、crud、搜索关键字、完整实例项目
01-11
浏览器url地址访问，http://localhost:8080/dialog/selectAllLaw
pagehelp使用以及后端传数据前端解析（代码示例）
m0_46065798的博客
11-05 1416
前后端代码截图 展示 如下： 那么，pagehelp中穿的数据 字段都表示什么意思，如下所示： // 此处直接显示一条文字显示，直接用append追加形式即可 /* 这个数据也是从后台传来的，因为后台数据中是以分页形式传来的数据，后台已经做好了分页操作 * 这里直接拿数据即可展示即可，对应的属性名称，可以在console.log(result)这个日志信息中看到 * 属性与之相对应即可 * * 这
happyCode(6) PageHelper使用前写法和使用后写法
phone13144830339的博客
11-27 358
一、手写Limit，手动使用泛型封装PageInfo Controller @RequestMapping("/queryAllLimit")     @ResponseBody     public List&lt;Test&gt; queryAllLimit(Integer pageSize,Integer pageNo) {         return testService.quer...
Springboot+mybatis+PageHelper 前端使用bootstrap-table实现分页
dogHuaMing的博客
12-23 1077
项目是使用maven工程管理，因此导入pagehelper的依赖，可以通过以下链接找最新的依赖 https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-s
前后端分页实现（分页插件PageHelper）
qq_39158327的博客
07-02 2611
1.前言 前后端分页是一件相对困难的事情，因此我会将分页的详细实现方法分享给大家。 2.后端Java代码实现 2.1 controller层代码 @RequestMapping(value = "/getAlltoUser") private String getList1(Model model,@RequestParam(required = false, defaultValue = "1", value = "pageNum") Integer pageNum, @RequestPa
前端分页（Page.java入门->pagehelper插件进阶）
qq_43022218的博客
03-03 266
前端分页 入门 写一个Page.java实体类（Copy的话，记得在最后加一个“}”） public class Page<T> implements Serializable { //当前页 private Integer currPageNo; //每页记录数 private Integer PageSize; //总记录数 pri...
pageHelper分页以及 jsp 数据处理(前端jsp页面分页)、jsp页码显示过多问题\jstl日期比较、分页不排序的问题
qq_45699990的博客
12-23 1287
pageHelper分页插件使用以及 jsp 中数据处理
pageHelper配合前端插件实现分页
lzh_coder8080的博客
10-30 1354
前端分页插件 jqueryPagination 下载链接：http://www.jq22.com/jquery-info15113 后端Controller: @RequestMapping("/userList") public String userList(Model model, @RequestParam(defaultValue = "1", value = "pageNum...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值