tymeleaf+ajax实现局部刷新，tymeleaf实现分页

kai的笔记本

已于 2022-04-02 16:18:48 修改

阅读量2.2k

点赞数

分类专栏：自学java 文章标签： java

于 2022-03-24 13:44:55 首次发布

本文链接：https://blog.csdn.net/weixin_45535665/article/details/123709055

版权

本文介绍了如何使用Tymeleaf和Ajax实现分页功能，并解决两者交互中遇到的问题。通过Ajax异步请求避免全页刷新，Tymeleaf用于前端数据填充。重点讨论了数据返回类型、Tymeleaf标签的使用以及Ajax请求的处理方式。

摘要由CSDN通过智能技术生成

今天完成了困难已久的分页功能，使用tymeleaf+springboot实现分页，然后相对分页后的数据进行模糊查询，不想使用window.location.href来进行跳转，就想到了ajax，结果就出现了一堆问题。本文章仅用来记录自己的学习历程，仅供参考，如果有错误的地方可以指出，因为我是个菜鸟。

分页功能实现：

后台代码：

    @GetMapping("/pagelist")
    public String pagelist(@RequestParam(value = "pn",defaultValue = "1")Integer pn,
                           Model model,String like){
   
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        //判断前端传递过来的like模糊查询是否为空
        boolean empty = StringUtils.isEmpty(like);
        queryWrapper.like(!empty,"userName",like);
        Page<User> userPage = new Page<>(pn, 5);
        userService.page(userPage,queryWrapper);

        model.addAttribute("userPage",userPage);
        return "user/list";
    }

表格数据遍历：

<tbody>
<tr class="" th:each="user,stats:${userPage.records}">
    <td th:text="${user.username}"></td>
    <td th:text="${user.phone}"></td>
    <td>[[${user.realname}]]</td>
    <td>[[${user.sex}]]</td>
    <td>[[${user.address}]]