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;
...
@Override
public 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.page
int 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 {
...
@Override
public 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分页 。