码迷,mamicode.com
首页 > 编程语言 > 详细

基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页

时间:2020-01-14 00:05:38      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:使用   elements   cti   需要   实现   效果   element   number   dex   

实现百度搜索使用的前五后四原则,效果如下。

技术图片

 

 

 技术图片

 

 

 下面贴出代码,复制到前端即可,只需要域中放置page对象就可以。(springdatajpa自带的page 注意:第一页是按0开始算的)

                  <div class="modal-footer no-margin-top">
                                <div class="pull-left">
                                    <div class="form-group form-inline">
                                        总共<span th:text="${page.totalPages}"></span> 页,共<span th:text="${page.totalElements}"></span>  条数据。
                                    </div>
                                </div>
                                <div class="page">
                                    <ul class="pagination">

                                        <!--上一页数-->
                                        <li  class="page-item" th:if="${page.pageable.getPageNumber() != 0}">
                                            <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])"     class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a th:onclick="pageRequest(0)" class="page-link" >首页</a>
                                        </li>
                                        <!--前五后四分页实现-->
                                        <!--总页数<10-->
                                        <li th:if="${page.totalPages lt 11}" class="page-item" data-th-each="i : ${#numbers.sequence(0, page.totalPages)}" data-th-classappend="${(page.number ) eq i} ? ‘active‘ : ‘‘" >
                                            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                                                <span data-th-text="${i+1}"></span>
                                            </a>
                                        </li>
                                        <!--总页数>10-->
                                        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() lt 5}" class="page-item" data-th-each="i : ${#numbers.sequence(0, 9)}" data-th-classappend="${(page.number ) eq i} ? ‘active‘ : ‘‘" >
                                            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                                                <span data-th-text="${i+1}"></span>
                                            </a>
                                        </li>

                                        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+3 lt page.totalPages}" class="page-item" data-th-each="i : ${#numbers.sequence(page.pageable.getPageNumber()-5, page.pageable.getPageNumber()+4)}" data-th-classappend="${(page.number ) eq i} ? ‘active‘ : ‘‘" >
                                            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                                                <span data-th-text="${i+1}"></span>
                                            </a>
                                        </li>
                                        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 gt page.totalPages}" class="page-item" data-th-each="i : ${#numbers.sequence(page.totalPages-10, page.totalPages-1)}" data-th-classappend="${(page.number ) eq i} ? ‘active‘ : ‘‘" >
                                            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                                                <span data-th-text="${i+1}"></span>
                                            </a>
                                        </li>
                                        <!--尾页-->
                                        <li class="page-item">
                                            <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >尾页</a>
                                        </li>
                                        <!--下一页-->
                                        <li  class="page-item"  th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
                                            <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
                                                »
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                            </div>

基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页

标签:使用   elements   cti   需要   实现   效果   element   number   dex   

原文地址:https://www.cnblogs.com/super-hu/p/12189681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!