现在公司大多数都实现了前后端分离,前端使用Vue、React、AngularJS 等框架,不用完全依赖后端,但是如果对于比较小型的项目,没必要前后端分离,而Springboot与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;
  }

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

  <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:href="@{'index?currentPage=' + ${i}}"  th:each="i :${#numbers.sequence(pages.startPage, pages.endPage)}" th:text="${i}"  th:class="${pages.pageNum == i}? 'curPage' :'' "></a>

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

   页面效果如下
这里写图片描述

Logo

前往低代码交流专区

更多推荐