springboot、mybatis和thymeleaf 实现前端页面分页

实现前端页面分页，可以按照以下步骤进行：

1. 在前端页面中添加分页组件，例如bootstrap的分页组件，或者自己写一个分页组件。

2. 在后端接口中，通过mybatis查询数据库中的数据，并将查询到的数据返回给前端。

3. 在后端接口中，通过springboot的PageHelper插件对查询结果进行分页处理，得到分页后的数据。

4. 将分页后的数据返回给前端，并在前端页面中显示分页数据。

5. 在前端页面中，监听分页组件的事件，例如翻页、改变每页显示条数等事件，将事件参数传递给后端接口，重新查询并分页处理数据，更新前端页面显示的数据。

下面是一个使用thymeleaf模板引擎的示例代码：

Controller代码：

@GetMapping("/list")
public String list(Model model, @RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) {
    PageHelper.startPage(pageNum, pageSize);
    List<User> userList = userService.getUserList();
    PageInfo<User> pageInfo = new PageInfo<User>(userList);
    model.addAttribute("pageInfo", pageInfo);
    return "user/list";
}

Thymeleaf页面代码：

<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user : ${pageInfo.list}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.email}"></td>
            </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li th:class="${pageInfo.isFirstPage() ? 'disabled' : ''}">
            <a th:href="@{${#httpServletRequest.requestURI}(pageNum=1,pageSize=${pageInfo.pageSize})}">&laquo;</a>
        </li>
        <li th:class="${pageInfo.isFirstPage() ? 'disabled' : ''}">
            <a th:href="@{${#httpServletRequest.requestURI}(pageNum=${pageInfo.prePage},pageSize=${pageInfo.pageSize})}">&lsaquo;</a>
        </li>
        <li th:each="page : ${pageInfo.navigatepageNums}"
            th:class="${page == pageInfo.pageNum ? 'active' : ''}">
            <a th:href="@{${#httpServletRequest.requestURI}(pageNum=${page},pageSize=${pageInfo.pageSize})}" th:text="${page}"></a>
        </li>
        <li th:class="${pageInfo.isLastPage() ? 'disabled' : ''}">
            <a th:href="@{${#httpServletRequest.requestURI}(pageNum=${pageInfo.nextPage},pageSize=${pageInfo.pageSize})}">&rsaquo;</a>
        </li>
        <li th:class="${pageInfo.isLastPage() ? 'disabled' : ''}">
            <a th:href="@{${#httpServletRequest.requestURI}(pageNum=${pageInfo.pages},pageSize=${pageInfo.pageSize})}">&raquo;</a>
        </li>
    </ul>
</div>

在上述代码中，使用了PageHelper插件对查询结果进行分页处理，并将分页信息放入PageInfo对象中，然后将PageInfo对象放入Model中，传递给Thymeleaf模板引擎进行渲染。在Thymeleaf页面中，使用了bootstrap的分页组件，根据PageInfo对象中的分页信息动态生成分页按钮，并监听按钮的点击事件，通过URL传递参数给后端接口重新查询并分页处理数据，更新前端页面显示的数据。