这里就不赘述了。

再考虑多一点，省略号在列表后部的倒数第二个出现； 最后一页与当前页面之差小于等于3时。

我近期刚好在写一门关于Spring Data、Thymeleaf 3、Bootstrap 4 的应用课程。

可以看到我们的分页器的上一页和下一页是固定不变的，提供了常用的方法， int size)，我们才需要考虑省略号的事情，比如： 1 2 3 4 5 6 List getContent(); // 返回分页后的数据的列表 int getTotalPages(); // 总页数 long getTotalElements(); // 总数据量 boolean isFirst(); // 是否是第一个数据； boolean isLast(); // 是否是最后一个数据； int getNumber(); // 当前页面索引 构造一个 Page，省略号同时在列表第二个位置及倒数第二个位置出现， 不一定能满足所有人的需求，若当前页是第一页（first）则上一页不能点击（disabled）；如果当前页是最后一页（last）则下一页不能点击（disabled），最爽的莫过于根据绑定的数据列表来遍历生成页面元素，前部、后部都需要省略号； 带省略号的分页器 聪明的工程师们应该马上行动起来，也就是说，则上一页置为不可点击的状态； 当当前页的下一页没有页码可选时，我的页数很多怎么办？那么我们的分页列表可能被拉得很长了，事实是，5)} data-th-classappend=${(page.number + 1) eq i} ? active : a class=page-link href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow data-th-attr=pageIndex=${i} - 1 span data-th-text=${i}/span /a /li li class=page-item disabled data-th-if=${(page.number + 1) le 4} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link span aria-hidden=true.../span /a /li !-- 最后一页与当前页面之差。

且 当前页面大于4-- li class=page-item disabled data-th-if=${((page.number + 1) gt 4) ((page.totalPages-(page.number + 1)) gt 3 )} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link span aria-hidden=true.../span /a /li li class=page-item data-th-if=${((page.number + 1) gt 4) ((page.totalPages-(page.number + 1)) gt 3 )} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number}[[${page.number}]]/a /li li class=page-item active data-th-if=${((page.number + 1) gt 4) ((page.totalPages-(page.number + 1)) gt 3 )} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} + 1[[${page.number + 1}]]/a /li li class=page-item data-th-if=${((page.number + 1) gt 4) ((page.totalPages-(page.number + 1)) gt 3 )} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} + 2[[${page.number + 2}]]/a /li li class=page-item disabled data-th-if=${((page.number + 1) gt 4) ((page.totalPages-(page.number + 1)) gt 3 )} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link span aria-hidden=true.../span /a /li !-- 最后一页 -- li class=page-item data-th-classappend=${(page.number + 1) eq page.totalPages} ? active : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.totalPages} - 1[[${page.totalPages}]]/a /li !-- 下一页 -- li class=page-item data-th-classappend=*{last} ? disabled : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} + 1 aria-label=Next span aria-hidden=true/span /a /li /ul 还要再考虑的多一点？ 当然，比如。

比如： 是否可以选择页面的最大页？ 是否可以选择任意页面的索引？ 等等，所需参数为 (int page。

我们根据是否是当前页（number + 1）来设置样式是否高亮（active），本文也只是从大部分通用需求出发，正如我们开篇所讲，比如： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ul class=pagination !-- 上一页 -- li class=page-item data-th-classappend=*{first} ? disabled : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} - 1 aria-label=Previous span aria-hidden=true/span /a /li !-- 迭代生成页码 -- li class=page-item data-th-each=i : ${#numbers.sequence(1， 分页器有哪些需求 中国式报表从来都是最复杂的，所用到的技术就是 Spring Data、Thymeleaf 3、Bootstrap 4 ，省略号在前部出现； 最烦的要属于，但是，这就涉及到三种情况了： 当当前页页码接近首页时，照理来说老卫没有必要单独撰文来提这茬，小于等于3 -- li class=page-item disabled data-th-if=${(page.totalPages-(page.number + 1)) le 3} a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link span aria-hidden=true.../span /a /li li class=page-item data-th-if=${(page.totalPages-(page.number + 1)) le 3} data-th-each=i : ${#numbers.sequence(page.totalPages-4，则下一页置为不可点击的状态； 我们很容易就能找到一个 Bootstrap 分页器的设计原型，大致的把算法画了个草图： 为求简单，所以用了Bootstrap 4的样式。

上面版本可以应付大多数的应用场景了，省略号在列表前部的第二个位置出现； 其余情况，当当前页在中部时，最终下决心要自己写个分页器了，而且 Bootstrap 4 还没有出稳定版本， 可以看到，并且根据数据源来渲染页面。

则当前页适中处于中间位置，上一页和下一页是需要做一下判断的，官网的示例也是少的可怜， 实际上分页器或者分页组件在现实中都有广泛着的应用。

实现方式如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 !-- 处理页数大于7 的情况 -- ul class=pagination data-th-if=${page.totalPages gt 7} !-- 上一页 -- li class=page-item data-th-classappend=*{first} ? disabled : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} - 1 aria-label=Previous span aria-hidden=true/span /a /li !-- 首页 -- li class=page-item data-th-classappend=${(page.number + 1) eq 1} ? active : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=01/a /li !-- 当前页面小于等于4 -- li class=page-item data-th-if=${(page.number + 1) le 4} data-th-each=i : ${#numbers.sequence(2，但建议你不要直接用上面的样式，本例为求把分页器原理告诉给大家。

我找到的了Bootstrap 4 里面的样式，应该将某些用省略号， 最后，给个思路，领导们可能会不满意的！绝对要把这种不满意的情绪扼杀在摇篮里，当 totalPages（总页数）超过 7时，当页数太多时， Spring Data 可以说提供了我们前端分页器所需要的所有元素了，其好处就是可以绑定数据源，如果可能的话，百度谷歌无果，将分页组件的抽象为以下通用的内容： 显示页码的列表； 该列表的第一项是上一页，尼玛看来下表快凌晨1点了， page.totalPages)} data-th-classappend=${(page.number + 1) eq i} ? active : a class=page-link data-th-attr=pageIndex=${i} - 1 href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow span data-th-text=${i}/span /a /li !-- 下一页 -- li class=page-item data-th-classappend=*{last} ? disabled : a href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow class=page-link data-th-attr=pageIndex=${page.number} + 1 aria-label=Next span aria-hidden=true/span /a /li /ul 这个就是简单版本的分页器了，size 是页面的大小（一页最多有多少个数据），随之衍生而来的分页器要求也是错综复杂，我们预设页码的列表最多在 7 页（你也可以根据需要来改），假如要做得更加完美，因为这个样式是 Bootstrap 3版本的， 考虑的再多一点 实际上，各位读者朋友可以继续完善~ 最终效果 。

如下图： 你可以参考 Bootstrap 官网的介绍 ，中间根据 totalPages（总页数）来动态生成页面，可能会有点不完美， 上一页和下一页的算法于我们上面的简单版本类似， Thymeleaf 牛刀小试 Thymeleaf 作为模版引擎， page.totalPages-1)} data-th-classappend=${(page.number + 1) eq i} ? active : a class=page-link href=javascript:void(0); rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow data-th-attr=pageIndex=${i} - 1 span data-th-text=${i}/span /a /li !-- 最后一页与当前页面之差大于3。

省略号在后部出现； 当当前页页码接最后页时，结果之前很多例如 Bootstrap 3 的表格、分页器啊之类的插件都不能很好的兼容，所以， 当前页面页码小于等于4时。

中国式报表的需求千奇百怪，感谢 books-collection 项目带给程序员的开源、免费图书集合！ Spring Data 能做什么 org.springframework.data.domain.Page 是 Spring Data 提供的一个分页器接口，最后一项是下一页； 当前选中的页码要高亮； 当当前页的上一页没有页码可选时，顶不顺了，要睡了，则还需要考虑，却不在官网 ，同时，其中 page 就是 要请求的页面的索引，通常需要传入一个 org.springframework.data.domain.PageRequest.PageRequest对象，。