分页技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wearetheworld1/article/details/54604584

本人前端不熟，最近的项目的页面用到分页，研究了一下，趁还记得，写下来，搞不好以后还会用到。
下面讲的主要分3块，第一是文件需求设定，第二是前端的代码，第三是后台的代码。

一.文件需求设定
1.需要导入的包（maven管理的工程）

<!-- pagehelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>4.1.0.Final</version>
        </dependency>

2.spring-resources.xml里的设定

<!-- 创建SqlSessionFactory，同时指定数据源 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<!-- 自动扫描entity目录, 省掉Configuration.xml里的手工配置 -->
<property name="mapperLocations" value="classpath*:mapper/*/*.map.xml" />
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<!-- offsetAsPageNum设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 -->
<!-- rowBoundsWithCount设置为true时，设置为true时，使用RowBounds分页会进行count查询 -->
<!-- pageSizeZero设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 -->
<!-- reasonable设置为true时，禁用合理化时,如果pageNum<1或pageNum>pages会返回空数据 -->
<value>
dialect=mysql
offsetAsPageNum=true
rowBoundsWithCount=true
pageSizeZero=true
reasonable=false
</value>
</property>
</bean>
</array>
</property>

</bean>

二.前端代码的要求
1.jsp页面要引入分页插件

<%@ taglib prefix="mars" uri="/tld/tags-mars.tld"%>

上面的插件内容如下

<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">
    <tlib-version>1.0</tlib-version>
    <short-name>mars</short-name>
    <tag>
        <name>page</name>
        <tag-class>mars.fw.web.taglib.PageTag</tag-class>
        <body-content>empty</body-content>
        <attribute>
            <name>url</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <name>pageSize</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>int</type>
        </attribute>
        <attribute>
            <name>pageNum</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>int</type>
        </attribute>
        <attribute>
            <name>total</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>int</type>
        </attribute>
        <attribute>
            <name>formId</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>java.lang.String</type>
        </attribute>
    </tag>
</taglib>

他在项目中的目录位置如下
这里写图片描述

2.下面是一个jsp页面的简要代码，主要是体现分页的用法

<!-- ---------------------检索框开始 --------------------- -->
<form class="form-horizontal" role="form" id="selectUser"
    action="${ctx}/systemUser/selectSystemUser.xht"
      method="post">
    <input type="text" class="form-control" placeholder="用户ID"
       style="width: 200px;" name="userId" id="userId"
        value="${systemUserInput.userId}">
        <!-- -------value 值这样写是为了在搜索后，搜索框中能有搜索的条件，如不需要则可以不写--------- -->
</form>
<!-- ---------------------检索框结束 --------------------- -->
<div class="panel-body">
                                <form action="${ctx}/systemUser/deleteUser.xht" id="deleteForm">
                                    <table id="table-2"
                                        class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>NO</th>
                                                <th>用户ID</th>
                                                <th>用户名</th>
                                                <th>密码</th>
                                                <th>系统ID</th>
                                                <th>是否是管理员</th>
                                                <th>删除标志</th>
                                                <th>创建日期</th>
                                                <th>更新日期</th>
                                            </tr>
                                        </thead>
                                        <tbody>
    <!-- #####################分页数据显示 开始########################### -->                                      <c:forEach items="${reObject.data.list}" var="user">
                                                <tr>
                                                    <td class="m"><input type="radio"
                                                        value="${user.userId}" name="userId"></td>
                                                    <td>${user.no}</td>
                                                    <td>${user.userId}</td>
                                                    <td>${user.userName}</td>
                                                    <td>${user.userPwd}</td>
                                                    <td>${user.systemCode}</td>
                                                    <td>${user.superFlg}</td>
                                                    <td>${user.delFlg}</td>
                                                    <td>${user.createTime}</td>
                                                    <td>${user.updateTime}</td>
                                                </tr>
                                            </c:forEach>
     <!-- #####################分页数据显示 结束########################### -->
                                        </tbody>
                                    </table>
                                </form>
     <!-- #####################分页标签 开始########################### -->
                                <div class="row text-right" style="padding: 0px 60px;">
                                    <mars:page url="/systemUser/selectSystemUser.xht"
     <!-- ############此路径与搜索条件的action一致################## -->
                                        pageSize="${reObject.data.pageSize}"
                                        pageNum="${reObject.data.pageNum}"
                                        total="${reObject.data.total}" formId="selectUser" />
     <!-- ##################formId的值与搜索提交的formId一致###################### -->
                                </div>
     <!-- #####################分页标签 结束########################### -->
                            </div>
     <!-- #####################分页插件使用到的js########################### -->
    <script src="${ctx}/js/sz.js"></script>

三.后台的代码实现
1.首先要有个分页的入力DTO的基类（入力的对象继承它）

/*
 * 
 * 文件名：ParamPage.java
 * 
 * 
 */
package mars.fw.web.model.param;

/**
 *
 * 分頁場合、入力DTO継承。<br>
 *
 */

public class ParamPage {
    /**
     * 页码 . <br>
     */
    private int pageNum = 1;

    /**
     * 每页显示数量 . <br>
     */
    private int pageSize = 10;

    /**
     * 页码设定 . <br>
     *
     * @param pageNum
     *            页码
     */
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    /**
     * 页码取得 . <br>
     *
     * @return 页码
     */
    public int getPageNum() {
        return pageNum;
    }

    /**
     * 每页显示数量設定 . <br>
     *
     * @param pageSize
     *            每页显示数量
     */
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    /**
     * 每页显示数量取得 . <br>
     *
     * @return 每页显示数量
     */
    public int getPageSize() {
        return pageSize;
    }

}

2.分页的入力DTO

public class SystemUserInput extends ParamPage {
//注意要继承上面的基类
    @Override
    public String toString() {
        return "SelectById [userId=" + userId + "]";
    }

    //用户ID
    @NotEmpty(message = "emailplatform.info.0009")
    private String userId;

    public String getUserId() {
        return userId;
    }

    public void setUserId(String userId) {
        this.userId = userId;
    }
}

3.controller里面的代码

public class SystemUserController {

    @Resource
    private SystemUserService systemUserService;

    /**
     * 根据用户ID查询用户
     * @param selectById
     * @param rs
     * @return
     */
    @RequestMapping(value = "/selectSystemUser.xht")
    public String selectSystemUser(SystemUserInput systemUserInput, Model model) {
        ResultObject reObject = new ResultObject();

        // 对下面一条sql文执行分页
        PageHelper.startPage(systemUserInput.getPageNum(),
                systemUserInput.getPageSize());
        List<SystemUserOutput> list = systemUserService.selectSystemUser(systemUserInput);
        PageInfo<SystemUserOutput> page = new PageInfo<SystemUserOutput>(
                list);
                /////////////////////////////////////
        for (int i = 0; i < list.size(); i++) {
            String date1 = list.get(i).getCreateTime();
            String date2 = list.get(i).getUpdateTime();
            String[] time1 = date1.split("\\s+");
            String[] time2 = date2.split("\\s+");
            String createTime = time1[0].toString();
            String updateTime = time2[0].toString();
            list.get(i).setCreateTime(createTime);
            list.get(i).setUpdateTime(updateTime);
        }
        reObject.setRt("1");
        reObject.setData(page);
        model.addAttribute("reObject", reObject);
        model.addAttribute("pageParam", systemUserInput);
        return "system/systemUser";
    }