好好编程-物流项目12【用户管理-分页实现】

  通过前面的介绍我们实现了用户信息的CRUD操作，接下来我们介绍了用户信息的分页查询。

用户信息分页

  我们知道分页目的是分批次的响应用户的请求。分页有前端页面的分页栏后后端的分页获取数据源中的数据两部分组成。

1.分页数据准备

1.1多准备点案例数据

1.2BasePage类

  便于封装分页数据

package com.bobo.dto;

/**
 * 封装分页的基本信息
 * 
 * @author 波波烤鸭
 *
 *         [email protected]
 */
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;">
          10option>
          20option>
          50option>
          100option>
      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">
          ${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的配置文件中添加分页拦截器:

---

pageHelper实现原理

---

<configuration>

	<plugins>
		
		<plugin interceptor="com.github.pagehelper.PageHelper">
			<property name="dialect" value="mysql" />
			
			
			
			<property name="offsetAsPageNum" value="true" />
			
			
			<property name="rowBoundsWithCount" value="true" />
			
			
			<property name="pageSizeZero" value="true" />
			
			
			
			<property name="reasonable" value="false" />
			
			
			
			
			<property name="params" value="pageNum=start;pageSize=limit;" />
			
			<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中获取数据的方式

启动服务，访问