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" 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>
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="">&nbsp;&nbsp; 
    <button type="submit" class="btn btn-primary">查询</button>&nbsp;&nbsp; <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运行结果


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