通过前面的介绍我们实现了用户信息的CRUD操作,接下来我们介绍了用户信息的分页查询。
用户信息分页
我们知道分页目的是分批次的响应用户的请求。分页有前端页面的分页栏后后端的分页获取数据源中的数据两部分组成。
1.分页数据准备
1.1多准备点案例数据
1.2BasePage类
便于封装分页数据
package com.bobo.dto; /** * 封装分页的基本信息 * * @author 波波烤鸭 * * dengpbs@163.com */ public class BasePage { // 当前页 protected int pageNum = 1; // 每页显示的条数 protected int pageSize = 5; public int getPageNum() { return pageNum; } public void setPageNum(int pageNum) { this.pageNum = pageNum; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } }
UserDto需要基础BasePage类
2.前端分页栏
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <div> 共有${pageModel.total }条记录,共${pageModel.pages }页,每页 <select name="pageSize" onchange="changePageSize(this.value)" style="width: 50px;"> <option value="10" ${pageModel.pageSize==10?"selected":"" }>10</option> <option value="20" ${pageModel.pageSize==20?"selected":"" }>20</option> <option value="50" ${pageModel.pageSize==50?"selected":"" }>50</option> <option value="100" ${pageModel.pageSize==100?"selected":"" }>100</option> </select> 条记录,当前${pageModel.pageNum }/${pageModel.pages }页, <a href="javascript:homePage()">首页</a>| <a href="javascript:frontPage()">上一页</a>| <a href="javascript:nextPage()">下一页</a>| <a href="javascript:lastPage()">尾页</a>| 转到<select name="pageNum" onchange="goPage(this.value)" style="width: 50px;"> <c:forEach begin="1" end="${pageModel.pages }" var="i"> <option value=${i } ${pageModel.pageNum==i?"selected":"" }>${i }</option> </c:forEach> </select> </div> <script type="text/javascript"> function homePage(){ document.getElementById("pageNum").value=1; document.getElementById("pager").submit();//表单提交 } function frontPage(){ document.getElementById("pageNum").value=${pageModel.pageNum<=1? 1 : pageModel.pageNum-1 }; document.getElementById("pager").submit();//表单提交 } function nextPage(){ document.getElementById("pageNum").value=${pageModel.pageNum>=pageModel.pages?pageModel.pages:pageModel.pageNum+1 }; document.getElementById("pager").submit();//表单提交 } function lastPage(){ document.getElementById("pageNum").value=${pageModel.pages }; document.getElementById("pager").submit();//表单提交 } function goPage(cur_page){ document.getElementById("pageNum").value=cur_page; document.getElementById("pager").submit();//表单提交 } function changePageSize(cur_pageSize){ document.getElementById("pageSize").value=cur_pageSize; document.getElementById("pager").submit();//表单提交 } </script>
用户页面引入
<div class="inline pull-right page" style="margin-top: 20px;"> <form action="/user/queryPage" id="pager"> <input type="hidden" name="pageSize" id="pageSize" value="${pageModel.pageSize }"> <input type="hidden" name="pageNum" id="pageNum" value="${pageModel.pageNum }"> </form> <jsp:include page="/pageBar.jsp"></jsp:include> </div>
3.后端请求实现
后端分页我们通过mybatis的分页插件PageHelper来实现,我们需要在mybats的配置文件中添加分页拦截器:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <plugins> <!-- com.github.pagehelper为PageHelper类所在包名 --> <plugin interceptor="com.github.pagehelper.PageHelper"> <property name="dialect" value="mysql" /> <!-- 该参数默认为false --> <!-- 设置为true时,会将RowBounds第一个参数offset当成pageNum页码使用 --> <!-- 和startPage中的pageNum效果一样 --> <property name="offsetAsPageNum" value="true" /> <!-- 该参数默认为false --> <!-- 设置为true时,使用RowBounds分页会进行count查询 --> <property name="rowBoundsWithCount" value="true" /> <!-- 设置为true时,如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 --> <!-- (相当于没有执行分页查询,但是返回结果仍然是Page类型) --> <property name="pageSizeZero" value="true" /> <!-- 3.3.0版本可用 - 分页参数合理化,默认false禁用 --> <!-- 启用合理化时,如果pageNum<1会查询第一页,如果pageNum>pages会查询最后一页 --> <!-- 禁用合理化时,如果pageNum<1或pageNum>pages会返回空数据 --> <property name="reasonable" value="false" /> <!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 --> <!-- 增加了一个`params`参数来配置参数映射,用于从Map或ServletRequest中取值 --> <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,不配置映射的用默认值 --> <!-- 不理解该含义的前提下,不要随便复制该配置 --> <property name="params" value="pageNum=start;pageSize=limit;" /> <!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page --> <property name="returnPageInfo" value="check" /> </plugin> </plugins> </configuration>
3.1控制器
修改请求地址
@RequestMapping("/queryPage") public String queryPage(UserDto dto,Model model){ PageInfo<User> pageModel = userService.queryPage(dto); model.addAttribute("pageModel", pageModel); return "user/user"; }
3.2service层实现
/** * 分页带条件查询用户信息 * @param dto * @return */ public PageInfo<User> queryPage(UserDto dto);
@Override public PageInfo<User> queryPage(UserDto dto) { PageHelper.startPage(dto.getPageNum(), dto.getPageSize()); List<User> list = this.query(dto.getUser()); PageInfo<User> pageInfo = new PageInfo<User>(list); return pageInfo; }
PageInfo类:
4.测试
注意修改user.jsp中获取数据的方式
启动服务,访问