案例：送水系统8

分页

pom依赖

  <!--mybatis的分页插件依赖(pagehelper)-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.0</version>
        </dependency>

application.yml

配置pageHelper分页插件的内容:  

pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countsql

HistoryService

修改 listHistory方法之前返回值是list，现在不行了，因为加了分页，带分页的就要返回PageInfo

 pageNum：当前页

pageSize：每页显示条数

 /**
     查询所有送水历史信息
     */
 PageInfo<History> listHistory(Integer pageNum,Integer pageSize);

 @Override
    public PageInfo<History> listHistory(Integer pageNum, Integer pageSize) {
        List<History> historyList = historyMapper.listHistory();
        return new PageInfo<>(historyList);
    }

HistoryController

 然后对原有的方法进行改造

@RequestMapping("/listHis")
    public String listHistory(Model model,
                              @RequestParam(required = false,defaultValue="1",value="pageNum") Integer pageNum,
                              @RequestParam(defaultValue = "5",value="pageSize") Integer pageSize) {
        //为了程序的严谨性，判断非空：
        if(pageNum == null || pageNum <= 0){
            pageNum = 1;   //设置默认当前页
        }
        if(pageSize == null || pageSize <= 0){
            pageSize = 5;    //设置默认每页显示的数据数
        }
        System.out.println("当前页是："+pageNum+"显示条数是："+pageSize);

        //1.引入分页插件,pageNum是第几页，pageSize是每页显示多少条,默认查询总数count
        PageHelper.startPage(pageNum,pageSize);

        PageInfo<History> pageInfo = historyService.listHistory(pageNum, pageSize);
        model.addAttribute("pageInfo",pageInfo);
        return "historyList";
    }

historyList.html前端页面

修改页面， <tbody>获取的不再是hisList，而是pageInfo.list（因为list集合在分页中）

分页可以写在<tbody>标签的下面

 <!--显示分页信息部分代码-->
                    <div class="modal-footer no-margin-top">
                        <div class="col-md-6">
                            <strong>当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pageSize}]] 页.一共 [[${pageInfo.total}]] 条记录
                            </strong>
                        </div>
                        <ul class="pagination pull-right no-margin">

                            <!--hasPreviousPage 是否有前一页-->
                            <li th:if="${pageInfo.hasPreviousPage}">
                                <a th:href="'/history/listHis?pageNum=1'">首页</a>
                            </li>
                            <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                                 <!--prePage:前一页-->
                                <a th:href="'/history/listHis?pageNum='+${pageInfo.prePage}">
                                    <i class="ace-icon fa fa-angle-double-left"></i>
                                    <span>&laquo;</span>
                                </a>
                            </li>

                            <!--遍历条数-->
                            <!--navigatepageNums：所有导航页号-->
                            <li th:each="nav:${pageInfo.navigatepageNums}">
                                <a th:href="'/history/listHis?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
                                <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
                            </li>
       						 <!--hasNextPage：是否有下一页-->
                            <li class="next" th:if="${pageInfo.hasNextPage}">
                                <a th:href="'/history/listHis?pageNum='+${pageInfo.nextPage}">
                                    <i class="ace-icon fa fa-angle-double-right"></i>
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>

                            <li>
                                <a th:href="'/history/listHis?pageNum='+${pageInfo.pages}">尾页</a>
                            </li>
                        </ul>
                    </div>


                    <div>当前页号：<span th:text="${pageInfo.pageNum}"></span></div>
                    <div>每页条数：<span th:text="${pageInfo.pageSize}"></span></div>
                    <div>起始行号：<span th:text="${pageInfo.startRow}"></span></div>
                    <div>终止行号：<span th:text="${pageInfo.endRow}"></span></div>
                    <div>总结果数：<span th:text="${pageInfo.total}"></span></div>
                    <div>总页数：<span th:text="${pageInfo.pages}"></span></div>
                    <hr />
                    <div>是否为第一页：<span th:text="${pageInfo.isFirstPage}"></span></div>
                    <div>是否为最后一页：<span th:text="${pageInfo.isLastPage}"></span></div>
                    <div>是否有前一页：<span th:text="${pageInfo.hasPreviousPage}"></span></div>
                    <div>是否有下一页：<span th:text="${pageInfo.hasNextPage}"></span></div>

<li class="prev" th:if="${pageInfo.hasPreviousPage}">

//我设定的首页是否还有前一页

<li th:each="nav:${pageInfo.navigatepageNums}">

//navigatepageNums：所有导航页号

<li th:each="nav:${pageInfo.navigatepageNums}">
    <a th:href="'/history/listHis?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
    <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
</li>

 //遍历这些页面，设计一个高亮显示，如果这个页是当前页的话

还要在

<strong>当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pageSize}]] 页.一共 [[${pageInfo.total}]] 条记录
</strong>中把它加个样式才能高亮显示