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

最新推荐文章于 2022-12-27 02:48:54 发布

dnc8371

最新推荐文章于 2022-12-27 02:48:54 发布

阅读量548

点赞数 2

文章标签： java python linux web html

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分页。

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

dnc8371

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Spring数据和Thymeleaf实现Bootstrap分页

Twitter Bootstrap具有非常好的分页UI ，在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它。引导程序中的标准分页受Rdio启发的简单分页，非常适合应用程序和搜索结果。大块很难错过，易于扩展，并提供较大的点击区域。从Bootstrap文档显示分页的原始源代码非常简单： <div class...
复制链接

扫一扫