JSP中分页功能的实现

- 日理万妓 2022-05-08 06:50 354阅读 0赞

## 分页原理 ##

![在这里插入图片描述][70]

一共有三行数据,当执行`select *from Member limit 1, 1`,选取的是第二行数据,也就是说数据的行数是从0开始  
![在这里插入图片描述][70 1]  
当执行`select *from Member limit 0, 1`的时候,控制台显示的是第一行的数据  
![在这里插入图片描述][70 2]

所以对于`limit`的用法,就是第一个**startIndex**参数为第几行数据,之后的**pageSize**为一页中可以包含多少行数据!

可以在dao层中创建方法 `List<Member> pager(Long pageSize, Long pageNum);`*(方法灵活运用)*  
其中传入的两个参数pageSize为一页可以看多少行数据,pageNum为看第几页  
而**startIndex**则应该为`startIndex=(pageNum-1)*pageSize`

**详细原理为:**  
![在这里插入图片描述][70 3]

**dao层中创建方法**

![在这里插入图片描述][70 4]  
**则在实现层中编写**  
![在这里插入图片描述][70 5]

如果在分页的基础上要进行查询功能,则可以用上述的第二的方法:  
`List<Member> pager(Long pageSize, Long pageNum, String name);`  
则在实现层中的代码编辑为:  
![在这里插入图片描述][70 6]

## 使用类库 ##

创建完dao层和impl层之后,使用类库**PageItem**  
![在这里插入图片描述][70 7]  
![在这里插入图片描述][70 8]  
![在这里插入图片描述][70 9]  
![在这里插入图片描述][70 10]  
![在这里插入图片描述][70 11]  
![在这里插入图片描述][70 12]

或者在`WebContent->WEB-INF->lib`中导入`com.liuvei.common.jar`私人类库

![在这里插入图片描述][70 13]  
也需要导入jstl和standard的jar包  
![在这里插入图片描述][70 14]

**之后编辑需要分页的页面代码**  
![在这里插入图片描述][70 15]  
使用地方:  
![在这里插入图片描述][70 16]  
count显示数据的条数,不清晰可以去另外我的博客的MySQL连接中有关于count方法的详细代码  
![在这里插入图片描述][70 17]  
对于这里的**pagerItem**,则是使用于\*\*\_pager.jsp\*\*分页代码中,在request作用域中,可以直接使用el表达式获取

**使用分页切换页面：\_\_pager.jsp**  
相关代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    
    <script>
    
    	//修改url里的某个查询变量的值，如果不存在这个查询变量，则添加这个变量和值
    	function changeUrlArg(url, arg, val) {
    		var pattern = arg + '=([^&]*)';
    		var replaceText = arg + '=' + val;
    		return url= url.match(pattern) ? url.replace(eval('/(' + arg
    				+ '=)([^&]*)/gi'), replaceText) : (url.match('[\?]') ? url
    				+ '&' + replaceText : url + '?' + replaceText);
    	}
    	
    	
    </script>
    
    <div class="paging">
    
    	<div class="aleft" style="display: inline-block; float: left;">
    		<span>共${pagerItem.rowCount }行，</span> </span><span><select
    			onchange="location.href=changeUrlArg(changeUrlArg(location.href,'${pagerItem.paramPageSize }', this.options[this.options.selectedIndex].value),'${pagerItem.paramPageNum }', '1');">
    
    				<c:forEach var="i" begin="1" end="100" step="1">
    
    					<option value="${i }" ${pagerItem.pageSize==i?"selected":""}>${i }</option>
    				</c:forEach>
    
    		</select>行/页</span>
    	</div>
    	<div class="aright" style="display: inline-block; float: right;">
    
    
    		<c:set value="${pagerItem.pageNum == 1}" var="isFisrtPage"
    			scope="request" />
    		<c:set value="${pagerItem.pageNum == pagerItem.pageCount}"
    			var="isLastPage" scope="request" />
    
    
    		<c:choose>
    			<c:when test="${isFisrtPage}">
    				 <span style="color:#ccc">首页</span>
    				 <span style="color:#ccc">上一页</span>
    			</c:when>
    			<c:otherwise>
    				 <span><a href="${pagerItem.firstPageUrl }">首页</a></span>
    				 <span><a href="${pagerItem.prevPageUrl }">上一页</a></span>
    			</c:otherwise>
    		</c:choose>
    
    		<c:choose>
    			<c:when test="${isLastPage}">
    				 <span style="color:#ccc">下一页 </span>
    				 <span style="color:#ccc">尾页</span>
    			</c:when>
    			<c:otherwise>
    				 <span><a href="${pagerItem.nextPageUrl }">下一页</a></span>
    				 <span><a href="${pagerItem.lastPageUrl }">尾页</a></span>
    			</c:otherwise>
    		</c:choose>
    
    
    		<span>    跳到第 <select
    			onchange="location.href=changeUrlArg(location.href,'${pagerItem.paramPageNum }', this.options[this.options.selectedIndex].value);">
    
    				<c:forEach var="i" begin="1" end="${pagerItem.pageCount }">
    
    					<option value="${i }"${pagerItem.pageNum==i?"selected":""}>${i }</option>
    				</c:forEach>
    
    		</select>页 /共${pagerItem.pageCount }页
    	</div>
    </div>

**之后静态包含"\_\_pager.jsp**  
在需要分页的页面,选择合适的位置静态包含  
![在这里插入图片描述][70 18]

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

**多加参数的代码处理**

List<Member> pager(Long pageSize, Long pageNum, String name);

在servlet类中的处理代码,只是在得到集合的时候多传入用户输入的name值,如果name值为空,也不会有太多的影响.

protected void listDeal(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		String userName = request.getParameter("userName");
    		// 把userName放入作用域中,请求转发的页面直接可以使用el表达式进行获取
    		request.setAttribute("userName", userName);
    
    		List<Member> vDataList = null;
    		// 分页步骤1：创建PagerItem对象，处理url传过来的pageSize和pageindex
    		PagerItem pagerItem = new PagerItem();
    		pagerItem.parsePageSize(request.getParameter(pagerItem.getParamPageSize()));
    		pagerItem.parsePageNum(request.getParameter(pagerItem.getParamPageNum()));
    
    		// 分页步骤2.1，根据条件，查找符合条件的所有记录数---count()要根据实际情况编写方法
    		Long rowCount = 0L;
    
    		if (!SysFun.isNullOrEmpty(userName)) {
    
    			rowCount = memberService.countBySearch(userName).longValue();
    			// 分页步骤2.2，将记录数赋给pagerItem，以便进行分页的各类计算
    			pagerItem.changeRowCount(rowCount);
    			// 分页步骤2.3，从数据库取指定的分页数据--pager()要根据实际情况编写
    			vDataList = memberService.pagerByName(pagerItem.getPageSize(), pagerItem.getPageNum(), userName);
    
    		} else {
    			rowCount = memberService.count().longValue();
    			// 分页步骤2.2，将记录数赋给pagerItem，以便进行分页的各类计算
    			pagerItem.changeRowCount(rowCount);
    			// 分页步骤2.3，从数据库取指定的分页数据--pager()要根据实际情况编写
    
    			vDataList = memberService.pager(pagerItem.getPageSize(), pagerItem.getPageNum());
    		}
    
    		// 分页步骤2.4，设置页面的跳转url
    		pagerItem.changeUrl(SysFun.generalUrl(request.getRequestURI(), request.getQueryString()));
    		/**
    		 * request.getRequestURI()获取的是全路径 request.getQueryString()获取查询字符串，即路径?后面跟的内容
    		 */
    		request.setAttribute("count", rowCount);
    		request.setAttribute("pagerItem", pagerItem);
    		request.setAttribute("DataList", vDataList);
    
    		String toPage = "/WEB-INF/view00/Member_list.jsp";
    		request.getRequestDispatcher(toPage).forward(request, response);
    	}

[70]: /images/20220508/ba0eb0a5116449edb2dfe77e9a3dc5ef.png
[70 1]: /images/20220508/194e61f563434178b257fdf737b00c01.png
[70 2]: /images/20220508/b319d4ea0dee417496372a717db070ad.png
[70 3]: /images/20220508/9d5a2fa8ed534233be0510eb3d1725b0.png
[70 4]: /images/20220508/f1c0c8630c3d4647abc60a32dfc90a0e.png
[70 5]: /images/20220508/3fde3dd18922436799f21eeb326546da.png
[70 6]: /images/20220508/7f2bac75d0754452bfa70f734186367e.png
[70 7]: /images/20220508/3442732ac4144d648865330891862ce9.png
[70 8]: /images/20220508/97b9f9448dfd432fbc43d839b6b7de50.png
[70 9]: /images/20220508/eebb0a43c8a24096a95e18d3c11587ee.png
[70 10]: /images/20220508/4763553fb5cb456f9a4d7d00962a368f.png
[70 11]: /images/20220508/ff226f694ad541d08443d14a14d4d100.png
[70 12]: /images/20220508/7df1c0905038447b9c1f28016019023d.png
[70 13]: /images/20220508/b123600e10b2481faad46afd0444f7cc.png
[70 14]: /images/20220508/cbc613aa1e96423c9e75e0596ffe88c7.png
[70 15]: /images/20220508/b9dffe418bf74278bf4daafdc8ec2037.png
[70 16]: /images/20220508/9a0443835f1143159c34bb2d35c21032.png
[70 17]: /images/20220508/a74b7a38a3d341d8ad73ae4cf7750701.png
[70 18]: /images/20220508/640c877165fc44c49d88b3a88c49a8a0.png