实际上分页器可能分页组件在现实中都有遍及着的应用，照理来说老卫没有须要单独撰文来提这茬。事实是，我近期恰亏得写一门关于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 项目带给措施员的开源、免费图书荟萃！

Spring Data 能做什么

org.springframework.data.domain.Page 是 Spring Data 提供的一个分页器接口，劳务派遣管理系统，提供了常用的要领，软件开发，好比：

结构一个 Page，凡是需要传入一个 org.springframework.data.domain.PageRequest.PageRequest工具，所需参数为 (int page, int size)，个中 page 就是 要请求的页面的索引，size 是页面的巨细（一页最多有几多个数据）。

Spring Data 可以说提供了我们前端分页器所需要的所有元素了。

Thymeleaf 牛刀小试

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）。

思量的再多一点

实际上，上面版本可以应付大大都的应用场景了。可是，大概会有点不完美，好比，我的页数许多怎么办？那么我们的分页列表大概被拉得很长了，率领们大概会不满足的！绝对要把这种不满足的情绪抹杀在摇篮里。