网站首页   文章专栏   SpringBoot+Thymeleaf实现分页
SpringBoot+Thymeleaf实现分页
原创 2020-02-17 13:32 ApeNixX 352浏览 SpringBoot

  • 现在公司大多数都实现了前后端分离,前端使用Vue、React、AngularJS 等框架,不用完全依赖后端,但是如果对于比较小型的项目,没必要前后端分离,而Springboot与Thymeleaf搭配是个不错的选择。


  • 在实际应用中,我们经常会对一些展示数据的页面进行分页,java后端分页使用PageHelper是个非常不错的选择,下面将会描述如何使用PageHelper+thymeleaf实现前端分页展示。在实际应用中,我们经常会对一些展示数据的页面进行分页,java后端分页使用PageHelper是个非常不错的选择,下面将会描述如何使用PageHelper+Thymeleaf实现前端分页展示。
  • 首先引入相应的jar包
   <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.1.2</version>
        <type>pom</type>
    </dependency>
  <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
<dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
    </dependency>

引入nekohtml使得程序能解析HTML文档并用标准的XML接口来访问其中的信息,否则在使用thymeleaf时可能会报一写语法上的错误。

   对于PageHelper只需要默认配置即可,如果有特殊需求可以自行在application.yml中配置    接下来是后端实现分页:

PageHelper.startPage(currentPage,1);
List<MbBlogEntity> datas= searchDataDao.findIndexData();
PageInfo<MbBlogEntity> pageInfo = new PageInfo<>(blogs);

   PageHelper.startPage(currentPage,1);第一个参数表示当前页面,第二个表示页长,下面一句紧邻需要分页的sql,分页信息可以用PageInfo来接收,然后将数据封装传递到前端,如果需要对分页信息进行处理可以自行封装。

public Map<String,Object> getMap(PageInfo<MbBlogEntity> pageInfo){
 Map<String,Object> map = new HashMap();
 Integer startPage = 0;
 Integer endPage = 0;
 map.put("pageNum",pageInfo.getPageNum());
 map.put("pageSize",pageInfo.getPageSize());
 map.put("size",pageInfo.getSize());
 map.put("startRow",pageInfo.getStartRow());
 map.put("endRow",pageInfo.getEndRow());
 map.put("total",pageInfo.getTotal());
 map.put("pages",pageInfo.getPages());
 map.put("prePage",pageInfo.getPrePage());
 map.put("nextPage",pageInfo.getNextPage());
 map.put("isFirstPage",pageInfo.isIsFirstPage());
 map.put("isLastPage",pageInfo.isIsLastPage());
 map.put("hasPreviousPage",pageInfo.isHasPreviousPage());
 map.put("hasNextPage",pageInfo.isHasNextPage());
 map.put("startPage",startPage);
 map.put("endPage",endPage);
 return map;
}

或者直接返回PageInfo对象

List<Article> articles = articleService.findArticleByTag(tag,10,pageNum);
     PageInfo<Article> pageInfo = new PageInfo<>(articles);
     request.setAttribute("pageInfo",pageInfo);

 前端根据返回回来的分页数据进行相应的处理

  <a class="allpage"><b th:text="'共 '+ ${pages.pages}+ ' 页'"></b></a>
  <a th:if="${pages.hasPreviousPage} == true" th:href="@{'index?currentPage=' + ${pages.prePage}}"  >上一页</a>
  <a th:if="${pageInfo.pages} gt 0" th:href="@{'index?currentPage=' + ${i}}"  th:each="i :${#numbers.sequence(1, pageInfo.pages)}" th:text="${i}"  th:class="${pages.pageNum == i}? 'curPage' :'' "></a>

    <a th:href="@{'index?currentPage=' + ${pages.nextPage}}" th:if="${pages.hasNextPage} == true">下一页</a>
    <a th:href="@{'index?currentPage='+ ${pages.pages}}" >尾页</a>

 页面效果如下

版权声明:本文由ApeNixX原创出品,转载请注明出处!

本文链接:http://www.apenixx.top/article/details/1581917577


  Thymeleaf    分页 

赞助本站,网站的发展离不开你们的支持!
来说两句吧
最新评论
  • 不落阁
    不落阁
    我为大家做了模拟留言与回复!试试吧!

    Absolutely
    Absolutely这是用户回复内容

    2017-03-18 18:26回复

    Absolutely
    Absolutely 回复 不落阁这是第二个用户回复内容

    2017-03-18 18:26回复