zoukankan      html  css  js  c++  java
  • 基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页

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

     下面贴出代码,复制到前端即可,只需要域中放置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>
  • 相关阅读:
    Silverlight文本元素—高级修饰
    C#常用集合总结2
    Silverlight图片处理——(伸展,裁剪,蒙版)
    选择“Asp.Net Web应用程序”还是“Asp.Net网站”?
    HTML5能给软件初学者带来什么呢?
    性格的弱点
    (原)jvoiplib中的examples的编译和运行
    开源的好东西
    C++编绎器编绎C语言的问题
    gcc生成静态库和动态库(转自http://blog.csdn.net/ast_224/archive/2009/03/13/3988244.aspx)
  • 原文地址:https://www.cnblogs.com/super-hu/p/12189681.html
Copyright © 2011-2022 走看看