03_分页插件HelpPager（GitHub旗下产品，非常方便）

其它
0去掉JavaScript验证，解决红叉问题(这个与分页无关)

正常：


03_分页插件

0.1 使用，红色框这个对象也可以写成两个参数：当前第几页，每页显示条数。这两个参数非常重要可以用来设置每页显示的条数。（这个分页插件dao（mapper）不用做任何操作，非常方便）看下面图片后的代码：


1 mybatis分页插件，首先在pom.xml添加分页的jar


<!-- 分页的组件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
上面的会下载如下的两个jar包

2 添加mybatis分页插件，在mybatis-config.xml文件中加入如下：
<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>


3 编写Controller
@RequestMapping("/query")
/*
* 参数说明：
* @RequestParam(defaultValue="1")int pageNum, 这个是显示第几页，给默认参数设置为1
* @RequestParam(defaultValue="2")int pageSize 这个是每页显示数据条数，给默认参数为2
*/
public String query(@RequestParam(defaultValue="1")int pageNum,@RequestParam(defaultValue="2")int pageSize,Model model){
PageInfo<Userbean> pageInfo = userService.queryAll(pageNum,pageSize);
model.addAttribute("pageModel", pageInfo);
return "user/userlist";
}
4 编写Service 接口和实现类
接口
PageInfo<Userbean> queryAll(int pageNum, int pageSize);

@Override
public PageInfo<Userbean> queryAll(int pageNum, int pageSize) {
//这个用来调用插件
PageHelper.startPage(pageNum, pageSize);
/*这个方法看着是查询全部的数据，调用了上面这句代码，就会会自动给
* UserbeanMapper.xml 里面的代码：
<select id="queryAll" resultType="userbean">
select
<include refid="Base_Column_List" />
from t_user
</select>
加上limt x,y
*/
List<Userbean> list=userMapper.queryAll();
PageInfo<Userbean> pageInfo = new PageInfo<Userbean>(list);
return pageInfo;
}

6 编写UserbeanMapper.Java
和 UserbeanMapper.xml
我们发现 这两个与不使用分页的写法一致，也就是dao层不用做任何的变化就可以实现分页。

接口
List<Userbean> queryAll();


<select id="queryAll" resultType="userbean">
select
<include refid="Base_Column_List" />
from t_user
</select>

7 编写公共页面pageBar.jsp
<%@ 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" οnchange="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" οnchange="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>
8列表页面加上分页功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>用户列表</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="Css/style.css" />
<script type="text/javascript" src="Js/jquery.js"></script>
<script type="text/javascript" src="Js/jquery.sorted.js"></script>
<script type="text/javascript" src="Js/bootstrap.js"></script>
<script type="text/javascript" src="Js/ckform.js"></script>
<script type="text/javascript" src="Js/common.js"></script>



<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}


</style>
</head>
<body>
<form class="form-inline definewidth m20" action="index.html" method="get">
用户名称：
<input type="text" name="username" id="username"class="abc input-default" placeholder="" value="">  
<button type="submit" class="btn btn-primary">查询</button>   <button type="button" class="btn btn-success" id="addnew">新增用户</button>
</form>
<table class="table table-bordered table-hover definewidth m10">
<thead>
<tr>
<th>用户id</th>
<th>用户名称</th>
<th>所在部门</th>
<th>真实名称</th>
<th>电话号码</th>
<th>操作</th>
</tr>
</thead>
<!-- 注意1这里使用pageModel这个对象 ，这个对象在下面的表单也有使用，所有在Controller转发过来之前名称一定对应上 -->
<!-- 注意2 pageModel.list 这个list来自底层插件里面的名称，所以可以直接使用list，追踪代码观察一下即可 -->
<c:forEach items="${pageModel.list }" var="u">
<tr>
<td>${u.userid } </td>
<td>${u.username }</td>
<td>${u.departmentid }</td>
<td>${u.realname }</td>
<td>${u.phonenumber }</td>
<td>
<a href="edit.html">编辑</a>
<a href="edit.html">删除</a>
</td>
</tr>
</c:forEach>
</table>
<form action="user/query" id="pager" name="pager" method="post">
<input type="hidden" name="pageNum" id="pageNum" value="${pageModel.pageNum}">
<input type="hidden" name="pageSize" id="pageSize" value="${pageModel.pageSize}">
</form>
<div class="inline pull-right page">
<%@include file="../../pageBar.jsp" %>
</div>
</body>
</html>
<script>
$(function () {


$('#addnew').click(function(){

window.location.href="add.html";
});


});

function del(id)
{


if(confirm("确定要删除吗？"))
{

var url = "index.html";

window.location.href=url;

}




}
</script>


注意这个页面的地方：


9运行结果


分页单表集成完成！！
详细请看源码。