导读:
使用分页技术,发送请求给控制器,拿到数据库数据,再传送给jsp页面显示。
(1)先给出我做的效果显示图
这里的页面设计用的是前端框架bootstrap,分页技术用的pageHelper。
(2)用boostrap的栅格系统,设计如下布局
<div class="container">
<div class="row">
<div class="col-md-12">
div>
div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
div>
div>
<div class="row">
div>
<div class="row">
<div class="col-md-6">
div>
<div class="col-md-6">
div>
如图:
注:表格的话,使用bootstrap很容易获得,在这里就不在赘述了,后面会贴出整个代码。
(3)分页技术的实现
首先,给出pageHelper的使用说明链接
https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md
我总结了一下使用方法:
1.在 pom.xml 中添加pageHelper依赖:
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.0.0version>
dependency>
2.配置拦截器插件(我在这里使用的是方式1:在 MyBatis 配置 xml 中配置拦截器插件)
<plugin interceptor="com.github.pagehelper.PageInterceptor">
plugin>
然后,在LoginController包下接收请求并处理
/**
* 使用pageHelper插件实现分页查询
* @param pn:pageNum的缩写,表示页数,默认值为1,即首页。
* @param model:是MVC里的Model,作用是将用户信息及分页信息存在此model里,以便发送给页面
* @return :返回到视图解析器下的jsp页面
*/
@RequestMapping(value="/userList")
public String getAllUser(@RequestParam(value="pn",defaultValue="1") Integer pn,Model model) {
//startPage是PageHelper的静态方法,参数1:默认开始页面,参数2:每页显示数据的条数
PageHelper.startPage(pn, 5);
//从当前类下注入的业务层实现类userService中调用方法,该方法所在类利用注入的userDao来调用真正的查询方法查询数据库信息。
List allUser = userService.getAllUser();
System.out.println(allUser);
//使用PageInfo包装查询页面,封装了详细的分页信息.第二个参数表示连续显示的页数
PageInfo page = new PageInfo(allUser,5);
//利用userService属性,将分页的信息以及查询出来的信息封装到model里,传送给页面
model.addAttribute("pageInfo", page);
return "user_list";
}
我以为,在这个地方有必要插播一个小广告,PageInfo 类有很多与分页有关又好用的属性以及方法,请往下看PageInfo 类的API:
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//总记录数
private long total;
//总页数
private int pages;
//结果集
private List list;
//前一页
private int prePage;
//下一页
private int nextPage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
//上面属性的get和set方法。
public long getTotal()
...
最后,说明都写在注释里了
<div class="row">
<div class="col-md-6">
当前${pageInfo.pageNum}页,共${pageInfo.pages }页,总${pageInfo.total }条记录
div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=1">首页a>
li>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
c:if>
<li>
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
<c:if test="${page_Nums==pageInfo.pageNum }">
<li class="active"><a href="#">${page_Nums}a>li>
c:if>
<c:if test="${page_Nums!=pageInfo.pageNum }">
<li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}a>li>
c:if>
c:forEach>
li>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
c:if>
<li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页a>li>
ul>
nav>
div>
div>
(4)那么到这里就已经结束了,我最后贴上自己完整的user_list.jsp页面,以供欣赏。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理页面title>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>用户管理页面h1>
div>
div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button type="button" class="btn btn-primary ">新增button>
<button type="button" class="btn btn-danger ">删除button>
div>
div>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>用户idth>
<th>用户名th>
<th>密码th>
<th>操作th>
tr>
thead>
<tbody>
<c:forEach items="${pageInfo.list}" var="user">
<tr>
<td>${user.id}td>
<td>${user.username}td>
<td>${user.password}td>
<td>
<button class="btn btn-primary btn-xs">
编辑<span class="glyphicon glyphicon-pencil" aria-hidden="true">span>
button>
<button class="btn btn-primary btn-xs" aria-label="Left Align">
删除<span class="glyphicon glyphicon-trash" aria-hidden="true">span>
button>
td>
tr>
c:forEach>
tbody>
table>
div>
<div class="row">
<div class="col-md-6">
当前${pageInfo.pageNum}页,共${pageInfo.pages }页,总${pageInfo.total }条记录
div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=1">首页a>
li>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
c:if>
<li>
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
<c:if test="${page_Nums==pageInfo.pageNum }">
<li class="active"><a href="#">${page_Nums}a>li>
c:if>
<c:if test="${page_Nums!=pageInfo.pageNum }">
<li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}a>li>
c:if>
c:forEach>
li>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
c:if>
<li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页a>li>
ul>
nav>
div>
div>
div>
body>
html>