欢迎访问昆山宝鼎软件有限公司网站! 设为首页 | 网站地图 | XML | RSS订阅 | 宝鼎邮箱 | 后台管理


新闻资讯

MENU

软件开发知识

省略号在列表前部的第 昆山软件定制开发 二个位置出现; 其余情况

点击: 次  来源:宝鼎软件 时间:2017-06-01

原文出处: waylau

实际上分页器可能分页组件在现实中都有遍及着的应用,照理来说老卫没有须要单独撰文来提这茬。事实是,我近期恰亏得写一门关于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 提供的一个分页器接口,劳务派遣管理系统,提供了常用的要领,软件开发,好比:

  • List getContent(); // 返回分页后的数据的列表
  • int getTotalPages(); // 总页数
  • long getTotalElements(); // 总数据量
  • boolean isFirst(); // 是否是第一个数据;
  • boolean isLast(); // 是否是最后一个数据;
  • int getNumber(); // 当前页面索引
  • 结构一个 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)。

    思量的再多一点

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