thymeleaf 实现分页功能

分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用。
本文通过使用SpringBoot+Mybatis-plus 实现前端后端的分页功能,并没有使用插件来实现,前端主要是使用Thymeleaf来渲染分页的页码信息。
前段页面分页代码
<nav class="mt-5" th:if="${pageInfo.totalPage>0}" th:fragment="pagination">
    <!-- align-items-center -->
    <ul class="pagination justify-content-center">
      <li th:class="|page-item ${pageInfo.pageNum==1?'disabled':''}|">
        <a class="page-link"
           th:href="@{${pageInfo.path}(pageNum=${pageInfo.pageNum}-1)}">&laquo; Previous</a>
      </li>
      <li th:class="|page-item ${i==pageInfo.pageNum?'active':''}|"
          th:each="i:${#numbers.sequence(pageInfo.getFrom(),pageInfo.getTo())}">
        <a class="page-link" th:href="@{${pageInfo.path}(pageNum=${i})}" th:text="${i}">1</a></li>
      <li th:class="|page-item ${pageInfo.pageNum>=pageInfo.totalPage?'disabled':''}|">
        <a class="page-link" th:href="@{${pageInfo.path}(pageNum=${pageInfo.pageNum+1})}">Next &raquo;</a>
      </li>
    </ul>
</nav>
  • pageInfo.pageNum 根据自己的逻辑定义
  • pageInfo.path 方便将整个分页片段引用到其他页面,如果不需要被引用,直接写死路径也可以
控制层Controller
  @RequestMapping("discuss/{userId}")
  public ModelAndView getIndexPage(
      PageInfo pageInfo,
      @RequestParam(name = "orderMode", defaultValue = "0") int orderMode) {
    ...
    ModelAndView mav = new ModelAndView();
    pageInfo = new PageInfo();
	page.setPath("user/discuss/" + userId);
    pageInfo.setPageNum(pageNum);
    // 这里把文章分类带到页面header实现动态加载分类
    IPage<Post> postIPage = postService.postPage(orderMode, pageNum);
    pageInfo.setTotal(postIPage.getTotal());
    pageInfo.setTotalPage(ObjUtils.toInteger(postIPage.getPages()));
    List<Post> records = postIPage.getRecords();
    pageInfo.setRows(records);
    List<Map<String, Object>> discussPosts = new ArrayList<>();
    ...

    mav.addObject("pageInfo", pageInfo);
    mav.addObject("orderMode", orderMode);
    mav.addObject("discussPosts", discussPosts);
    mav.setViewName("site/my-post");
    return mav;
  }

page.setPath(“user/discuss/” + userId); 路径最前边必须加入‘/’ ,如果仅是 user/discuss/,点击分页的时候会多出一层

https://localhost/user/discuss/user/discuss/2?pageNum=2

在这里插入图片描述

服务层service
public IPage<Post> postPage(Integer orderMode, Integer currentPage) {
    QueryWrapper<Post> wrapper = new QueryWrapper<>();
    if (orderMode != 0) {
      wrapper.eq("a", orderMode);
    }
    wrapper.orderByDesc("score", "created");
    // 第1页,每页2条
    Page<Post> page = new Page<>(currentPage, POSTSIZE);
    IPage<Post> postIPage = postMapper.selectPage(page, wrapper);
    // 获取当前数据
    return postIPage;
  }
数据访问层mapper
@Repository
public interface PostMapper extends BaseMapper<Post> {

}

获取pageInfo工具类

关注我获取更多干货

在这里插入图片描述

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Thymeleaf是一种Java模板引擎,它可以用于构建Web应用程序的用户界面。要实现条件分页,可以使用Thymeleaf的条件语句和分页插件。 以下是一个简单的示例,它演示了如何使用Thymeleaf分页插件实现条件分页: ``` <!-- 在 HTML 中添加分页插件 --> <div th:replace="fragments/pagination :: pagination(${page})"></div> <!-- 在控制器中设置分页参数 --> @GetMapping("/users") public String getUsers(@RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(defaultValue = "") String keyword, Model model) { // 获取用户列表 List<User> userList = userService.getUsers(page, size, keyword); // 设置分页对象 Page<User> userPage = new PageImpl<>(userList, PageRequest.of(page, size), userList.size()); // 将分页对象传递给模板 model.addAttribute("page", userPage); return "userList"; } <!-- 在模板中使用条件语句和分页对象 --> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>邮箱</th> </tr> </thead> <tbody> <tr th:each="user : ${page.content}" th:if="${user.name.contains(keyword) or keyword == ''}"> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.email}"></td> </tr> </tbody> </table> ``` 在上面的示例中,我们使用Thymeleaf的`th:each`循环遍历分页对象的内容,并使用`th:if`条件语句过滤出符合条件的数据。分页插件在模板中使用`th:replace`标签引入,它将渲染一个分页组件,该组件接受一个分页对象作为输入参数。 总之,Thymeleaf一个非常强大的模板引擎,它可以轻松地实现条件分页。我们只需要使用Thymeleaf的条件语句和分页插件,就可以在Web应用程序中实现高效的分页功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐观的Terry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值