使用Spring数据和Thymeleaf实现Bootstrap分页

Twitter Bootstrap具有非常好的分页UI ,在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它。

引导程序中的标准分页

受Rdio启发的简单分页,非常适合应用程序和搜索结果。 大块很难错过,易于扩展,并提供较大的点击区域。

图片

从Bootstrap文档显示分页的原始源代码非常简单:

<div class='pagination'><ul><li><a href='#'>Prev</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='#'>Next</a></li></ul>
</div>

您可以看到这只是一个模拟代码,要使其通过正确的超链接URL动态显示页码,我需要对现有代码进行很多更改。 因此,让我们从头开始,先更改域层,然后再更改应用程序服务层,表示层。 最后是将它们粘合在一起的配置。

域层更改

域层的唯一更改是BlogPostRepository 。 在具有检索按publishedTime排序的publishedTime发布BlogPost列表的方法之前:

public interface BlogPostRepository extends MongoRepository<BlogPost, String>{
...List<BlogPost> findByPublishedIsTrueOrderByPublishedTimeDesc();
...
}

现在我们需要获取分页结果列表。 使用Spring Data Page ,我们将返回Page<BlogPost>而不是List<BlogPost> ,并传递Pageable参数:

public interface BlogPostRepository extends MongoRepository<BlogPost, String>{
...Page<BlogPost> findByPublishedIsTrueOrderByPublishedTimeDesc(Pageable pageable);
...
}

应用程序服务层更改:

只需使用BlogPostRepository新功能,应用程序服务层的更改也非常简单:

BlogService界面

public interface BlogService {
...Page<BlogPost> getAllPublishedPosts(Pageable pageable);
...
}

BlogServiceImpl类

public class BlogServiceImpl implements BlogService {
...private final BlogPostRepository blogPostRepository;
...@Overridepublic Page<BlogPost> getAllPublishedPosts(Pageable pageable) {Page<BlogPost> blogList = blogPostRepository.findByPublishedIsTrueOrderByPublishedTimeDesc(pageable);return blogList;}
...
}

表示层更改:

Spring Data Page界面具有许多不错的功能来获取当前页码,获取总页数等。但是仍然缺少让我仅显示总分页的部分页面范围的方法。 因此,我创建了一个适配器类,以使用其他功能包装Sprng数据页面接口。

public class PageWrapper<T> {public static final int MAX_PAGE_ITEM_DISPLAY = 5;private Page<T> page;private List<PageItem> items;private int currentNumber;private String url;public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public PageWrapper(Page<T> page, String url){this.page = page;this.url = url;items = new ArrayList<PageItem>();currentNumber = page.getNumber() + 1; //start from 1 to match page.pageint start, size;if (page.getTotalPages() <= MAX_PAGE_ITEM_DISPLAY){start = 1;size = page.getTotalPages();} else {if (currentNumber <= MAX_PAGE_ITEM_DISPLAY - MAX_PAGE_ITEM_DISPLAY/2){start = 1;size = MAX_PAGE_ITEM_DISPLAY;} else if (currentNumber >= page.getTotalPages() - MAX_PAGE_ITEM_DISPLAY/2){start = page.getTotalPages() - MAX_PAGE_ITEM_DISPLAY + 1;size = MAX_PAGE_ITEM_DISPLAY;} else {start = currentNumber - MAX_PAGE_ITEM_DISPLAY/2;size = MAX_PAGE_ITEM_DISPLAY;}}for (int i = 0; i<size; i++){items.add(new PageItem(start+i, (start+i)==currentNumber));}}public List<PageItem> getItems(){return items;}public int getNumber(){return currentNumber;}public List<T> getContent(){return page.getContent();}public int getSize(){return page.getSize();}public int getTotalPages(){return page.getTotalPages();}public boolean isFirstPage(){return page.isFirstPage();}public boolean isLastPage(){return page.isLastPage();}public boolean isHasPreviousPage(){return page.hasPreviousPage();}public boolean isHasNextPage(){return page.hasNextPage();}public class PageItem {private int number;private boolean current;public PageItem(int number, boolean current){this.number = number;this.current = current;}public int getNumber(){return this.number;}public boolean isCurrent(){return this.current;}}
}

使用此PageWrapper ,我们可以包装从BlogService返回的Page<BlogPost>并将其放入SpringMVC UI模型。 请参阅博客页面的控制器代码:

@Controller
public class BlogController
...@RequestMapping(value = '/blog', method = RequestMethod.GET)public String blog(Model uiModel, Pageable pageable) {PageWrapper<BlogPost> page = new PageWrapper<BlogPost>(blogService.getAllPublishedPosts(pageable), '/blog');uiModel.addAttribute('page', page);return 'blog';}
...
}

Pageable是从PageableArgumentResolver传入的,我将在后面解释。 另一个技巧是我还将视图URL传递给PageWrapper ,它可用于在分页栏中构造Thymeleaf超链接。

由于我的PageWrapper非常通用,因此我为分页栏创建了一个html片段,因此当需要分页时,可以将其用于应用程序页面中的任何位置。 该片段html使用Thymeleaf th:if根据链接是否被禁用来在静态文本或超链接之间动态切换。 并且它使用th:href构造具有正确页码和页面大小的URL。

<!-- Pagination Bar -->
<div th:fragment='paginationbar'><div class='pagination pagination-centered'><ul><li th:class='${page.firstPage}? 'disabled' : '''><span th:if='${page.firstPage}'>← First</span><a th:if='${not page.firstPage}' th:href='@{${page.url}(page.page=1,page.size=${page.size})}'>← First</a></li><li th:class='${page.hasPreviousPage}? '' : 'disabled''><span th:if='${not page.hasPreviousPage}'>«</span><a th:if='${page.hasPreviousPage}' th:href='@{${page.url}(page.page=${page.number-1},page.size=${page.size})}' title='Go to previous page'>«</a></li><li th:each='item : ${page.items}' th:class='${item.current}? 'active' : '''><span th:if='${item.current}' th:text='${item.number}'>1</span><a th:if='${not item.current}' th:href='@{${page.url}(page.page=${item.number},page.size=${page.size})}'><span th:text='${item.number}'>1</span></a></li><li th:class='${page.hasNextPage}? '' : 'disabled''><span th:if='${not page.hasNextPage}'>»</span><a th:if='${page.hasNextPage}' th:href='@{${page.url}(page.page=${page.number+1},page.size=${page.size})}' title='Go to next page'>»</a></li><li th:class='${page.lastPage}? 'disabled' : '''><span th:if='${page.lastPage}'>Last →</span><a th:if='${not page.lastPage}' th:href='@{${page.url}(page.page=${page.totalPages},page.size=${page.size})}'>Last →</a></li></ul></div>
</div>

Spring配置变更

最后一步是将它们放在一起。 幸运的是,在更新代码之前,我做了一些研究。 Doug Haber 撰写了一篇非常不错的博客文章, 其中介绍了Spring MVC,Spring Data和Java Config 。 Doug在他的博客中提到了一些陷阱,尤其是Pageable参数需要一些配置技巧:

为了让Spring知道如何将参数转换为Pageable对象,您需要配置HandlerMethodArgumentResolver。 Spring Data提供了一个PageableArgumentResolver,但是它使用了旧的ArgumentResolver接口,而不是新的(Spring 3.1)HandlerMethodArgumentResolver接口。 XML config可以为我们解决这种差异,但是由于我们使用的是Java Config,因此我们必须手动进行一些操作。 幸运的是,如果您知道正确的魔术咒语,就可以轻松解决此问题……
道格·哈伯(Doug Haber)

在Doug的帮助下,我将此参数解析器添加到了WebConfig类中:

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = 'com.jiwhiz.blog.web')
public class WebConfig extends WebMvcConfigurerAdapter {
...@Overridepublic void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {PageableArgumentResolver resolver = new PageableArgumentResolver();resolver.setFallbackPagable(new PageRequest(1, 5));argumentResolvers.add(new ServletWebArgumentResolverAdapter(resolver));}
...
}

完成所有这些更改后,我的博客列表的页面顶部和底部将具有分页栏,并且它始终最多具有5个页码,中间​​是当前编号,并且已禁用。 分页栏还具有第一和开头以前的链接, 然后在年底最后环节。 我还在管理页面,用户列表和评论列表中使用了它,并且效果很好。

参考:来自Jiwhiz博客的JCG合作伙伴 Yuan Ji的Spring Data和Thymeleaf实现Bootstrap分页 。

翻译自: https://www.javacodegeeks.com/2013/03/implement-bootstrap-pagination-with-spring-data-and-thymeleaf.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一道前端学习题

对于没参加过互联网企业招聘&#xff0c;或是没有参加过大型互联网企业招聘的人来说&#xff0c;能以这些公司的面试题做为锻炼&#xff0c;无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答)&#xff0c;题目本身在现实中意义不大&#xff0c;主要是考…

codefroces 297E Mystic Carvings

problem&#xff1a;一个圆上依次有1~2*n的数字。每个数字都有且只有另一个数字与他相连。选出三条线&#xff0c;使得每条线的两端之间隔的最少点(只包括被选择的6个点)的个数相等。输入输出格式输入格式&#xff1a;The first line contains integer n(3<n<10^5) — th…

监听网页微信扫码支付成功_网付扫码点餐新福利,消费者点餐可获微信支付金币奖励...

扫码点餐相信大家都不陌生&#xff0c;即能餐饮解决商家人力物力投入成本痛点&#xff0c;又能方便消费者点餐。现今已成为了餐饮商户的标配系统。近两年&#xff0c;很多系统厂商都在试水扫码点餐领域。尤其是聚合支付服务商&#xff0c;拥有得天独厚的优势。市面上各家扫码点…

在Play上使用twitter4j! 框架和安全社交很容易

在昨天的个人黑客马拉松期间&#xff0c;我启动了一个项目&#xff0c;我可能会在这里介绍。 但是&#xff0c;最酷的启示是&#xff08;再次&#xff09;启动和运行起来有多么容易。 创建一个新的Play项目 添加Secure Social并为Twitter配置它&#xff0c;并使用示例中的InM…

Python 冒泡排序三种写法

需求&#xff1a;输入 n 个整数并将这些数字以从大到小和从小到大的顺序输出代码如下&#xff1a;bubble_sort_v1 1 #coding:utf-82 #__author__ Diva3 4 # 升序&#xff08;从小到大&#xff09;5 SORT_TYPE_ASC 16 # 降序&#xff08;从大到小&#xff09;7 SORT_TYPE_DE…

ptmalloc内存分配和回收详解(文字版)

ptmalloc内存分配和回收详解&#xff08;文字版&#xff09; 进程默认内存布局&#xff08;x86&#xff09; 从进程的内存布局可知&#xff0c;.bss段之上的这块分配给用户程序的空间被称之为heap&#xff0c;start_brk指向heap的开始&#xff0c;而brk指向heap的顶部。可以使用…

linux nfs

linux&#xff08;十四&#xff09;之linux NFS服务管理学到这里差不多就结束了linux的基础学习了&#xff0c;其实linux的内容并不难&#xff0c;我们要经常的反复的去操作它&#xff0c;多多和它去联络感情才能很好的掌握这个linux。 加油&#xff01;今天是星期二。没有什么…

下来安成功 打开一直白屏_推广人透露:戈洛夫金2021年可能与安德拉德上演拳王统一战...

IBF中量级拳王根纳季-戈洛夫金(Gennadiy Golovkin)随着本月摧毁强制挑战者卡米尔-塞泽梅塔(Kamil Szeremeta)&#xff0c;使得下一场比赛在对手选择问题上&#xff0c;具有很大的自由度。戈洛夫金的推广人埃迪-赫恩做客Sirius XM访谈时&#xff0c;透露了一个重要消息&#xff…

WEB接口测试之Jmeter接口测试自动化 (四)

Jmeter是压力测试、接口测试工具&#xff0c;Ant是基于Java的构建工具&#xff0c;具有跨平台的作用&#xff0c;jenkins是持续集成工具。将这三者结合起来可以搭建一套webservice接口测试的持续构建环境。 1、安装JDK&#xff0c;配置java环境变量&#xff08;略过&#xff09…

dnf机器人猜数字奖励_DNF:周年庆策划啪啪打脸,工作人员也出错误,难道又是临时工的锅?...

本来应该是很喜庆的一天&#xff0c;结果又遇见了策划啪啪打脸的事情&#xff0c;关键还连累玩家提心吊胆的。往年都是登录游戏送豪礼&#xff0c;今年策划就像搞点不一样&#xff0c;估计是认为今年送的“即时”史诗比较多吧。然后就很任性的在领取豪礼之前添加了一道“礼物申…

练习 3.16

如题&#xff1a;下面是某大学数据库的一组需求&#xff0c;此数据库用于记录学生的成绩&#xff0c;这与图1.2所示数据库类似&#xff0c;但并不完全相同。 a. 大学要记录每个学生的姓名、学号、社会保险号、当前地址与电话、永久地址与电话、出生日期、性别、年级&#xff08…

中国连计算机硬盘都无法生产吗,中国仍无能力制造出电脑中的硬盘

从最开始的40GB到现在的3TB甚至更大&#xff0c;硬盘技术已经发生了突飞猛进的发展&#xff0c;就连以往高高在上的SSD固态硬盘也从去年开始展现出大容量普及的趋势。但是&#xff0c;至今为止我们为何没有看到一款国产品牌的硬盘杀入市场呢&#xff1f;今日头条中一篇文章或许…

d3 i5 神舟精盾k480n_6款神舟精盾轻薄记本发布,10nm十代酷睿,匠心打造国潮好本...

神舟电脑新品&#xff1a;神舟精盾发布会已于2019年10月31日上午在深圳神舟电脑大厦招开&#xff0c;此次发布会一共发布了6款精盾系列的轻薄笔记本。 此次还有英特尔、英伟达、微软等重量级合作伙伴的大咖站台助力&#xff0c;神舟电脑产品总监王小陈先生、神舟电脑创新一部销…

css中border制作各种形状

css利用border制作各种形状的原理如图&#xff1a; 使用border绘制三角形是什么原理&#xff1f;事实上&#xff0c;宽度相等的border是以45度对接的&#xff0c;如下图: 没有了上border如图所示&#xff1a; 再设置border的宽度为0&#xff1a; 设置border的高度为0&#xff…

2016 linux发行版排行_选择困难症必看!云服务器如何选择操作系统,Windows和Linux哪个更好?...

在购买云服务器时&#xff0c;会有一个必选的配置&#xff0c;就是操作系统的选择&#xff0c;如何选择操作系统&#xff1f;操作系统选择错了怎么办&#xff1f;这是不少用户会遇到的问题&#xff0c;今天我们就来教大家如何选择操作系统&#xff0c;以及操作系统选择错了&…

怎样不通过高考进入清华计算机系,山东高考状元孟令昊澄清,没有参加政审,已经填报清华计算机系!...

原标题&#xff1a;山东高考状元孟令昊澄清&#xff0c;没有参加政审&#xff0c;已经填报清华计算机系&#xff01;说到高考状元&#xff0c;其实每年在高考分数公布以后和志愿填报的时候&#xff0c;他们都是大家最为关注的群体&#xff0c;特别是对于这些状元的去向成为了很…

DOM BOM document window 区别

DOM 是为了操作文档出现的 API&#xff0c;document 是其的一个对象&#xff1b; BOM 是为了操作浏览器出现的 API&#xff0c;window 是其的一个对象。 使用下图讲解&#xff1a; 归DOM管的&#xff1a; E区&#xff1a;即document 归BOM管的&#xff1a; A区&#xff1a;浏览…

D2

依托 Weex 的能力&#xff0c;轻舟平台使得前端开发人员可以基于 Vue 或者 Rax&#xff08;类 React&#xff09;开发媲美原生的 App。 不需要学习各类 Native 开发语言&#xff1b;不需要搭建复杂的编译打包环境&#xff0c;轻舟提供的一站式集成开发解决方案全部帮你搞定。吴…

hibernate5--主键生成策略

1、hibernate自己维护主键的值。首先获取该表中最大主键值&#xff0c;然后加一插入。主键字段对应的属性类型可以是int、short、long以及其封装类型。在高并发或者集群的情况下不能使用。 2、identity&#xff1a;使用数据库自身自增长来维护。 <id name"id" col…

vue watch 第一次不执行_Vue 实现前进刷新,后退不刷新的效果

https://github.com/woai3c/Front-end-articles​github.com需求一&#xff1a;在一个列表页中&#xff0c;第一次进入的时候&#xff0c;请求获取数据。点击某个列表项&#xff0c;跳到详情页&#xff0c;再从详情页后退回到列表页时&#xff0c;不刷新。也就是说从其他页面进…