Springboot + Jpa +thymeleaf 使用 pageable实现分页

本文参考 springboot使用JPA分页pageable分页；mybatis用pagehelper分页。分享两种分页方法

SpringBoot + thymeleaf 实现分页

说说自己踩过的坑吧

• pageHelper 在看到参考文前，我使用的是pageHelper，看了不下5篇文章，也上过github查看pageHelper的官方页面，不论是
  ------在启动项添加注解
  ------在application.properties添加的说明
  ------修改springboot的版本(pageHelper截至目前支持springboot 2.3.1版本)
  ------pageHelper.starPage()后一句严格要求为查询语句
  …
  都无法在我的网页上实现分页，都是显示我数据库中的所有条目

但在今天下午终于实现了分页功能，哭了，下面分享出我分页相关代码
先看一下项目的具体结构

• Controller 分页设置

		//...查找数据库  将结果返回给books(List<Book>) eg: books.bookService.getBookList();
        Sort sort = Sort.by(Sort.Direction.ASC, "id");
        Pageable pageable = PageRequest.of(pageNum - 1, pageSize, sort);
        // PageUtil.listConvertToPage 自定义的 List<> --> Page<> 的方法
        Page<Book> list = PageUtil.listConvertToPage(books, pageable);
        //list送给前端
        model.addAttribute("pageInfo", list);

• PageUtil 类

public class PageUtil {
    public static  <T> Page<T> listConvertToPage(List<T> list, Pageable pageable) {
        int start = (int) pageable.getOffset();
        int end = (start + pageable.getPageSize()) > list.size() ? list.size() : (start + pageable.getPageSize());
        return new PageImpl<T>(list.subList(start, end), pageable, list.size());
    }
}

• list.html
  表单部分

<table class="table table-hover">

            <tr>
                <th>图书id</th>
                <th>图书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>ISBN</th>
                <th>类别</th>
                <th>价格</th>
                <th>操作</th>
                <th>操作</th>
            </tr>
            <tr th:each="book : ${pageInfo.getContent()}">
                <th scope="row" th:text="${book.id}">1</th>
                <td th:text="${book.title}">neo</td>
                <td th:text="${book.author}">123456</td>
                <td th:text="${book.publish}">123456</td>
                <td th:text="${book.isbn}">0</td>
                <td th:text="${book.category.name}">0</td>
                <td th:text="${book.price}">0</td>
                <td><a th:href="@{edit/{id}(id=${book.id})}">编辑</a></td>
                <td><a th:href="@{delete/{id}(id=${book.id})}">删除</a></td>
            </tr>
        </table>

分页部分(居中让我查了好久，前端一点都不懂ei)

<!--分页-->
<div class="modal-footer ">

    <div class="col-md-6 col-xs-8 col-xs-offset-1">
        <ul class="pagination ">

            <!-- 首页 -->
            <li>
                <a th:href="'/book/list?pageNum=1'+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}"
                   }>首页</a>
            </li>

            <!-- 上一页 -->
            <li th:if="${pageInfo.hasPrevious()}">
                <a th:href="'/book/list?pageNum=' + ${pageInfo.previousPageable().getPageNumber()+1}+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}"
                   th:text="上一页"></a>
            </li>

            <!-- 中间页 -->
            <li th:each="pageNum:${#numbers.sequence(0, pageInfo.getTotalPages()-1)}">
                <a th:href="'/book/list?pageNum=' + ${pageNum+1}+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}"
                   th:text="${pageNum + 1}"
                   th:if="${pageNum ne pageInfo.pageable.getPageNumber()}"></a>
                <a th:href="'/book/list?pageNum=' + ${pageNum+1}+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}"
                   th:text="${pageNum + 1}"
                   th:if="${pageNum eq pageInfo.pageable.getPageNumber()}"
                   th:style="'font-weight:bold;background: #6faed9;'"></a>
            </li>

            <!-- 下一页 -->
            <li th:if="${pageInfo.hasNext()}">
                <a th:href="'/book/list?pageNum=' + ${pageInfo.nextPageable().getPageNumber()+1}+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}"
                   th:text="下一页"></a>
            </li>

            <!-- 尾页 -->
            <li>
                <a th:href="'/book/list?pageNum=' + ${pageInfo.getTotalPages()}+'&msg='+${searchInfo.get('msg')}+'&type='+${searchInfo.get('type')}">尾页</a>
            </li>

        </ul>
    </div>

</div>

具体项目：github