实现分页查询的思路与代码

• 思维图
  
• handler层（也就是control层）

    /**
     * 分页查询
     * @param keyword
     * @param pageNum
     * @param pageSize
     * @param modelMap
     * @return
     */
    @RequestMapping("/admin/get/page.html")
    public String getPageInfo(
            // 在请求中没有携带对应参数时，使用defaultValue提供默认值
            // keyword默认使用空字符串，和sql语句配合实现两种情况的适配
            @RequestParam(value = "keyword",defaultValue = "") String keyword,

            // PageNum默认值使用1，页面默认显示第一页
            @RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,

            // PageSize默认值使用5
            @RequestParam(value = "pageSize",defaultValue = "5") Integer pageSize,
            ModelMap modelMap
    ) {
        // 调用Service方法获取PageInfo对象
        PageInfo<Admin> pageInfo = adminService.getPageInfo(keyword, pageNum, pageSize);

        // 将PageInfo对象存入模型
        modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO,pageInfo);

        return "admin-page";
    }

• service层

    @Override
    public PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {

        // 1.调用PageHelper的静态方法开启分页功能
        PageHelper.startPage(pageNum,pageSize);

        // 2.执行查询
        List<Admin> list = adminMapper.selectAdminBuKeyword(keyword);

        // 3.封装到PageInfo对象中,并返回
        return new PageInfo<>(list);
    }

• 分页插件的依赖

            <!-- mybatis分页插件 -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.0.0</version>
            </dependency>

• mapper层

    <select id="selectAdminBuKeyword" resultMap="BaseResultMap">
        select id, login_acct, user_pswd, user_name, email, create_time
        from tb_admin
        where
            login_acct like concat("%",#{keyword},"%") or
            user_name like concat("%",#{keyword},"%") or
            email like concat("%",#{keyword},"%")
    </select>

• 前端JS

<!-- 分页插件要在jQuery的后面 -->
<link rel="stylesheet" href="css/pagination.css">
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

<script type="text/javascript">

    $(function () {
        // 调用后面声明的函数对页面导航条进行初始化操作
        initPagination();
    });

    // 生成页码导航条函数
    function initPagination() {

        // 获取总记录数
        var totalRecord = ${requestScope.pageInfo.total};

        // 声明一个JSON对象存储Pagination要设置的属性
        var properties = {
            num_edge_entries: 3,                                // 边缘页
            num_display_entries: 5,                             // 主体页数
            callback: pageSelectCallback,                     // 指定用户点击翻页时跳转页码的回调函数
            items_per_page: ${requestScope.pageInfo.pageSize},     // 每页显示多少条数据
            current_page: ${requestScope.pageInfo.pageNum - 1}, // 两者开始的下标不一致
            prev_text: "上一页",                                // 上一页按钮上显示的文本
            next_text: "下一页"                                 // 下一页按钮上显示的文本
        };

        // 生成页码导航条
        $("#Pagination").pagination(totalRecord,properties);
    }

    // 回调函数的含义：声明出来之后不是自己调用，而是交给系统或框架调用
    // 用户点击页码调用这个函数进行页码跳转
    // pageIndex是Pagination传给我们那个从0开始的页码，使用的时候要+1
    function pageSelectCallback(pageIndex,jQuery) {

        // 根据pageIndex计算得到pageNum
        var pageNum = pageIndex + 1;

        // 跳转页面
        window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";

        // 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
        return false;

    }

</script>

<tfoot>
  <tr>
    <td colspan="6" align="center">
      <div id="Pagination" class="pagination">
         <!-- 此处显示分页 -->
      </div>
    </td>
  </tr>
</tfoot>

• 需要导入分页相关的css代码

@charset "utf-8";      
.pagination a {
    text-decoration: none;
	border: 1px solid #AAE;
	color: #15B;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 0.1em 0.4em;
    margin-right: 5px;
	margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
	border: 1px solid #AAE;
}

.pagination .current.prev, .pagination .current.next{
	color:#999;
	border-color:#999;
	background:#fff;
}

• 导入jquery.pagination.js包网上下载即可
  
  感谢封捷老师，目标思路代码