前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >好好编程-物流项目12【用户管理-分页实现】

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

作者头像
用户4919348
发布2019-04-02 10:47:56
5850
发布2019-04-02 10:47:56
举报
文章被收录于专栏:波波烤鸭波波烤鸭

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

用户信息分页

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

1.分页数据准备

1.1多准备点案例数据

1.2BasePage类

  便于封装分页数据

代码语言:javascript
复制
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.前端分页栏

代码语言:javascript
复制
<%@ 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>

用户页面引入

代码语言:javascript
复制
<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实现原理


代码语言:javascript
复制
<?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控制器

修改请求地址

代码语言:javascript
复制
@RequestMapping("/queryPage")
public String queryPage(UserDto dto,Model model){
	PageInfo<User> pageModel = userService.queryPage(dto);
	model.addAttribute("pageModel", pageModel);
	return "user/user";
}

3.2service层实现

代码语言:javascript
复制
/**
 * 分页带条件查询用户信息
 * @param dto
 * @return
 */
public PageInfo<User> queryPage(UserDto dto);
代码语言:javascript
复制
@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中获取数据的方式

启动服务,访问

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年03月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 用户信息分页
    • 1.分页数据准备
      • 1.1多准备点案例数据
      • 1.2BasePage类
    • 2.前端分页栏
      • 3.后端请求实现
        • 3.1控制器
        • 3.2service层实现
      • 4.测试
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档