标签：target ble 大致 next boot 人的需求 html 集合 aliyun
Default pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
http://getbootstrap.com/components/?spm=5176.100239.blogcont72216.16.TJsaZ6#pagination
摘要： 实际上分页器或者分页组件在现实中都有广泛着的应用，照理来说老卫没有必要单独撰文来提这茬。事实是，我近期刚好在写一门关于Spring Data、Thymeleaf 3、Bootstrap 4 的应用课程，所以用了Bootstrap 4的样式，结果之前很多例如 Bootstrap 3 的表格、分页器啊之类的插件都不能很好的兼容，百度谷歌无果，而且 Bootstrap 4 还没有出稳定版本，官网的示例也是少的可怜，最终下决心要自己写个分页器了，所用到的技术就是 Spring Data、Thymeleaf 3、Bootstrap 4 。
原文同步至https://waylau.com/spring-data-thymeleaf-bootstrap-paginator
实际上分页器或者分页组件在现实中都有广泛着的应用，照理来说老卫没有必要单独撰文来提这茬。事实是，我近期刚好在写一门关于Spring Data、Thymeleaf 3、Bootstrap 4 的应用课程，所以用了Bootstrap 4的样式，结果之前很多例如 Bootstrap 3 的表格、分页器啊之类的插件都不能很好的兼容，百度谷歌无果，而且 Bootstrap 4 还没有出稳定版本，官网的示例也是少的可怜，最终下决心要自己写个分页器了，所用到的技术就是 Spring Data、Thymeleaf 3、Bootstrap 4 。
中国式报表从来都是最复杂的，随意衍生而来的分页器要求也是错综复杂。本例为求把分页器原理告诉给大家，所以，将分页组件的抽象为以下通用的内容：
我们很容易就能找到一个 Bootstrap 分页器的设计原型，如下图：
你可以参考 Bootstrap 官网的介绍 http://getbootstrap.com/components/#pagination，但建议你不要直接用上面的样式，因为这个样式是 Bootstrap 3版本的。
最后，我找到的了Bootstrap 4 里面的样式，却不在官网 http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_pagination.cfm。感谢 books-collection 项目带给程序员的开源、免费图书集合！
org.springframework.data.domain.Page 是 Spring Data 提供的一个分页器接口，提供了常用的方法，比如：
构造一个 Page，通常需要传入一个 org.springframework.data.domain.PageRequest.PageRequest对象，所需参数为 (int page, int size)，其中 page 就是 要请求的页面的索引，size 是页面的大小（一页最多有多少个数据）。
Spring Data 可以说提供了我们前端分页器所需要的所有元素了。
Thymeleaf 作为模版引擎，其好处就是可以绑定数据源，并且根据数据源来渲染页面。最爽的莫过于根据绑定的数据列表来遍历生成页面元素，比如：
<ul class="pagination" >
<!-- 上一页 -->
<li class="page-item" data-th-classappend="*{first} ? ‘disabled‘ : ‘‘">
<a href="javascript:void(0);" 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, 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);">
<span data-th-text="${i}"></span>
</a>
</li>
<!-- 下一页 -->
<li class="page-item" data-th-classappend="*{last} ? ‘disabled‘ : ‘‘">
<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
这个就是简单版本的分页器了，可以看到我们的分页器的“上一页”和“下一页”是固定不变的，中间根据 totalPages（总页数）来动态生成页面。同时，我们根据是否是当前页（number + 1）来设置样式是否高亮（active）。“上一页”和“下一页”是需要做一下判断的，若当前页是第一页（first）则“上一页”不能点击（disabled）；如果当前页是最后一页（last）则“下一页”不能点击（disabled）。
实际上，上面版本可以应付大多数的应用场景了。但是，可能会有点不完美，比如，我的页数很多怎么办？那么我们的分页列表可能被拉得很长了，领导们可能会不满意的！绝对要把这种不满意的情绪扼杀在摇篮里。
可以看到，假如要做得更加完美，则还需要考虑，当页数太多时，应该将某些用省略号。这就涉及到三种情况了：
聪明的工程师们应该马上行动起来，大致的把算法画了个草图：
为求简单，我们预设页码的列表最多在 7 页（你也可以根据需要来改），也就是说，当 totalPages（总页数）超过 7时，我们才需要考虑省略号的事情。
实现方式如下：
<!-- 处理页数大于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);" 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);" class="page-link" data-th-attr="pageIndex=0">1</a>
</li>
<!-- 当前页面小于等于4 -->
<li class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
data-th-classappend="${(page.number + 1) eq i} ? ‘active‘ : ‘‘" >
<a class="page-link" href="javascript:void(0);" 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);" class="page-link">
<span aria-hidden="true">...</span>
</a>
</li>
<!-- 最后一页与当前页面之差，小于等于3 -->
<li class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}">
<a href="javascript:void(0);" 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, page.totalPages-1)}"
data-th-classappend="${(page.number + 1) eq i} ? ‘active‘ : ‘‘" >
<a class="page-link" href="javascript:void(0);" data-th-attr="pageIndex=${i} - 1">
<span data-th-text="${i}"></span>
</a>
</li>
<!-- 最后一页与当前页面之差大于3，且 当前页面大于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);" class="page-link">
<