StringBoot + Thymeleaf + PageHelper + PageInfo 前端引入式分頁

1. Thymeleaf 配置application.properties：

# thymeleaf 配置
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=html
spring.thymeleaf.prefix=classpath:/templates/view/
           

2. pagehelper+pageinfo使用：https://mp.csdn.net/postedit/100132595

3. 前端使用

      3.1） 抽離出一份單獨的分頁html

<div th:fragment="pageInfo" class="row fenye zero">
    <div class="col-sm-6">
        <div class="dataTables_info" th:text="'共' + ${pageInfo.total} + '條'">共 57 條 </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
            <ul class="pagination">
                <li class="paginate_button previous disabled" style="margin-right: 15px;">
                    <select name="pageSize" class="form-control input-sm fenye2" onchange="page()">
                        <option th:selected="${pageInfo.size == 10}">10</option>
                        <option th:selected="${pageInfo.size == 20}">20</option>
                        <option th:selected="${pageInfo.size == 50}">50</option>
                        <option th:selected="${pageInfo.size == 100}">100</option>
                    </select>
                </li>
                <li class="paginate_button"><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="page(1)"><<</i></a></li>
                <li class="paginate_button "><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  th:onclick="'page(' + ${pageInfo.prePage} + ')'"><</a></li>
                <li class="paginate_button ">
                    <input class="fenyek cencetc" name="pageNum" pattern="^[0-9]+$" th:value="${pageInfo.pageNum}">
                </li>
                <li class="paginate_button "><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >/<span th:text="${pageInfo.pages}">10</span></a></li>
                <li class="paginate_button "><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  th:onclick="'page(' + ${pageInfo.nextPage} + ')'">></a></li>
                <li class="paginate_button "><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  th:onclick="'page(' + ${pageInfo.pages} + ')'">>></a></li>
                <li class="paginate_button next">
                    <a data-toggle="modal" data-target="#myModal3" onclick="page()"><i class="fa fa-refresh"></i> </a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var page = function(pageNum) {
            if(pageNum) $("input[name='pageNum']").val(pageNum);
            $("button[type='submit']").click();
        }
    </script>
</div>
           

      3.2） 其他頁面引用     

<!-- 分頁 -->
<div th:substituteby="base/page :: pageInfo"></div>
           

注：3.2 中th:substituteby 前半部分是抽離出的頁面位址，pageInfo是背景傳入的pageInfo對象；抽離出的頁面th:fragment="pageInfo" 參數必須與入參一緻 即背景傳入的pageInfo；