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

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

  1. <div class="page">
  2.  
  3. <ul class="pagination">
  4.  
  5. <!--上一页数-->
  6.  
  7. <li class="page-item" th:if="${page.pageable.getPageNumber() != 0}">
  8.  
  9. <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])" class="page-link"
  10.  
  11. data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
  12.  
  13. <span aria-hidden="true">«</span>
  14.  
  15. </a>
  16.  
  17. </li>
  18.  
  19. <li class="page-item">
  20.  
  21. <a th:onclick="pageRequest(0)" class="page-link" >首页</a>
  22.  
  23. </li>
  24.  
  25. <!--前五后四分页实现-->
  26.  
  27. <!--总页数<10-->
  28.  
  29. <li th:if="${page.totalPages lt 11}" class="page-item" data-th-each="i : ${#numbers.sequence(0, page.totalPages)}"
  30.  
  31. data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
  32.  
  33. <a class="page-link" th:onclick="pageRequest([[${i}]])">
  34.  
  35. <span data-th-text="${i+1}"></span>
  36.  
  37. </a>
  38.  
  39. </li>
  40.  
  41. <!--总页数>10-->
  42.  
  43. <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() lt 5}" class="page-item" data-th-each="i : ${#numbers.sequence(0, 9)}"
  44.  
  45. data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
  46.  
  47. <a class="page-link" th:onclick="pageRequest([[${i}]])">
  48.  
  49. <span data-th-text="${i+1}"></span>
  50.  
  51. </a>
  52.  
  53. </li>
  54.  
  55. <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.totalPages lt page.pageable.getPageNumber()+5 }"
  56.  
  57. class="page-item" data-th-each="i : ${#numbers.sequence(page.totalPages-10, page.totalPages-1)}"
  58.  
  59. data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
  60.  
  61. <a class="page-link" th:onclick="pageRequest([[${i}]])">
  62.  
  63. <span data-th-text="${i+1}"></span>
  64.  
  65. </a>
  66.  
  67. </li>
  68.  
  69. <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 lt page.totalPages}"
  70.  
  71. class="page-item" data-th-each="i : ${#numbers.sequence(page.pageable.getPageNumber()-5, page.pageable.getPageNumber()+4)}"
  72.  
  73. data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
  74.  
  75. <a class="page-link" th:onclick="pageRequest([[${i}]])">
  76.  
  77. <span data-th-text="${i+1}"></span>
  78.  
  79. </a>
  80.  
  81. </li>
  82.  
  83. <!--尾页-->
  84.  
  85. <li class="page-item">
  86.  
  87. <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >尾页</a>
  88.  
  89. </li>
  90.  
  91. <!--下一页-->
  92.  
  93. <li class="page-item" th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
  94.  
  95. <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
  96.  
  97. »
  98.  
  99. </a>
  100.  
  101. </li>
  102.  
  103. </ul>
  104.  
  105. </div>

基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页的更多相关文章

  1. 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法

    spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...

  2. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  3. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

  4. springboot+thymeleaf+pageHelper带条件分页查询

    html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...

  5. SpringBoot系列——Spring-Data-JPA(究极进化版) 自动生成单表基础增、删、改、查接口

    前言 我们在之前的实现了springboot与data-jpa的增.删.改.查简单使用(请戳:SpringBoot系列——Spring-Data-JPA),并实现了升级版(请戳:SpringBoot系 ...

  6. Springboot集成mybatis通用Mapper与分页插件PageHelper

    插件介绍 通用 Mapper 是一个可以实现任意 MyBatis 通用方法的框架,项目提供了常规的增删改查操作以及 Example 相关的单表操作.通用 Mapper 是为了解决 MyBatis 使用 ...

  7. MyBatis Generator实现MySQL分页插件

    MyBatis Generator是一个非常方便的代码生成工具,它能够根据表结构生成CRUD代码,可以满足大部分需求.但是唯一让人不爽的是,生成的代码中的数据库查询没有分页功能.本文介绍如何让MyBa ...

  8. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  9. jq分页插件,支持动态,静态分页的插件,简单易用。

    工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...

随机推荐

  1. 利用谓词实现List<>的Find等高级操作

    public class Person        {            public int Id { get; set; }            public string Name { ...

  2. PHP服务器端API原理及示例讲解(接口开发)

    http://www.jb51.net/article/136816.htm 下面小编就为大家分享一篇PHP服务器端API原理及示例讲解(接口开发),具有很好的参考价值,希望对大家有所帮助 相信大家都 ...

  3. Python--day26--复习

  4. Python--day34--前面网络编程的复习

  5. springboot 配置文件中属性变量引用方式@@解析

    这种属性应用方式是field_name=@field_value@. 两个@符号是springboot为替代${}属性占位符产生,原因是${}会被maven处理,所以应该是起不到引用变量的作用. @@ ...

  6. java Dialog

    Dialog构造方法 * Dialog(Frame owner, String title, boolean modal) 构造一个最初不可见的 Dialog,它带有指定的所有者 Frame.标题和模 ...

  7. 2019-5-21-NuGet-符号服务器

    title author date CreateTime categories NuGet 符号服务器 lindexi 2019-05-21 11:34:40 +0800 2019-05-08 21: ...

  8. html2canvas生成图片报错处理办法

    详见大佬博客链接: link.(https://www.jianshu.com/p/22bd5b98e38a) 需要注意的是要生成的网页中带的网络图片地址(如放在阿里云服务器图库的图片)经常有跨域报错 ...

  9. koa2入门--03.koa中间件以及中间件执行流程

    //中间件:先访问app的中间件的执行顺序类似嵌套函数,由外到内,再由内到外 //应用级中间件 const koa = require('koa'); var router = require('ko ...

  10. 一培训机构设计的学习android课程内容:供大家参考

    转自:http://www.cnblogs.com/csj007523/archive/2011/06/16/2082682.html 一培训机构设计的学习android课程内容:供大家参考 第一阶段 ...