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

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

<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.totalPages lt page.pageable.getPageNumber()+5  }"

            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 th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 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 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>

最新文章

  1. Netty(四)分隔符与定长解码器的使用
  2. 分布式服务框架 Zookeeper -- 管理分布式环境中的数据
  3. Controller中使用过滤器
  4. python 批量爬取代理ip
  5. Chapter Configuration
  6. IGF职业组比赛
  7. 转:关掉Archlinux中烦人的响铃
  8. Java API —— JDK5新特性
  9. Codevs_1230_元素查找_(set/Hash)
  10. vs2015中ctrl+shift+F进行“在文件中查找”,有时候无效?
  11. cf B Red and Blue Balls
  12. 生产环境 tomcat中启动缓慢
  13. chrome误删书签恢复。
  14. oc之里氏替换原则
  15. WordPress评论时一键填入昵称、邮箱和网址
  16. DBoW2应用
  17. 让WinSCP和Putty一直保持连接
  18. 今天我给你们推荐一本书《Linux就该这么学》!!!
  19. windows server远程连接提示“终端服务器超出了最大允许连接”
  20. process 多进程写法 multiprocessing

热门文章

  1. [转]Netty实现原理浅析
  2. History和Location
  3. vector容器、
  4. 【a403】遍历树问题
  5. H3C Network命令详解
  6. UVA 12563 &quot;Jin Ge Jin Qu hao&quot; (背包)
  7. junit 测试套件Suite
  8. 使用iOSSelect.js实现iOS的select下拉选择日期的联动效果
  9. WPF 使用 SharpDx 异步渲染
  10. 2018-11-5-win10-uwp-异步转同步