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；