springboot整合mybatis-plus的分页查询详细的html和js代码

以下是一个使用Spring Boot和MyBatis-Plus进行分页查询的简单示例，包括前端HTML和JS代码。

在后端，我们需要定义一个Controller来接收前端的分页请求并返回分页结果。这里使用了MyBatis-Plus提供的Page类来实现分页查询。在前端，我们使用jQuery和Bootstrap来实现分页功能。

后端代码：

@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/list")
    public Page<User> listUsers(@RequestParam(defaultValue = "1") int page,
                                @RequestParam(defaultValue = "10") int size) {
        Page<User> users = userService.listUsers(page, size);
        return users;
    }
}

UserService中的listUsers方法调用了MyBatis-Plus提供的PageHelper类进行分页查询：

@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public Page<User> listUsers(int page, int size) {
        Page<User> pager = new Page<>(page, size);
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        return userMapper.selectPage(pager, wrapper);
    }
}

前端代码：

<div class="container">
    <h1>User List</h1>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody id="user-list">
        </tbody>
    </table>
    <ul class="pagination">
        <li class="page-item" id="prev-page">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active" id="page-1">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item" id="next-page">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</div>

$(function () {
    var currentPage = 1;

    function loadUsers(page) {
        $.get('/users/list?page=' + page + '&size=10', function (data) {
            var userList = $('#user-list');
            userList.empty();
            for (var i = 0; i < data.records.length; i++) {
                var user = data.records[i];
                userList.append('<tr><td>' + user.id + '</td><td>' + user.name + '</td><td>' + user.email + '</td></tr>');
            }
            currentPage = data.current;
            updatePagination(data.pages);
        });
    }

    function updatePagination(totalPages) {
        var pagination = $('.pagination');
        var prevPage = $('#prev-page');
        var nextPage = $('#next-page');
        pagination.find('.page-item').remove();
        pagination.append(prevPage);
        for (var i = 1; i <= totalPages; i++) {
            var pageItem = $('<li class="page-item" id="page-' + i + '"><a class="page-link" href="#">' + i + '</a></li>');
            if (i === currentPage) {
                pageItem.addClass('active');
            }
            pagination.append(pageItem);
        }
        pagination.append(nextPage);
        prevPage.toggleClass('disabled', currentPage === 1);
        nextPage.toggleClass('disabled', currentPage === totalPages);
    }

    loadUsers(currentPage);

    $('.pagination').on('click', 'a', function (event) {
        event.preventDefault();
        var pageLink = $(this);
        if (pageLink.parent().hasClass('disabled') || pageLink.parent().hasClass('active')) {
            return;
        }
        var page = parseInt(pageLink.text());
        if (isNaN(page)) {
            if (pageLink.parent().attr('id') === 'prev-page') {
                page = currentPage - 1;
            } else {
                page = currentPage + 1;
            }
        }
        loadUsers(page);
    });
});

在这个示例中，我们使用了Bootstrap的分页样式，将分页结果显示为表格。在页面加载时，我们调用loadUsers函数来加载第一页的用户数据，同时更新分页条。当用户点击分页条上的按钮时，我们使用jQuery的事件处理函数来加载相应页面的数据。在加载数据时，我们向后端发送一个GET请求，带有当前页码和每页大小的参数，后端返回一个Page对象，其中包含了当前页码、总页数和页码对应的数据。我们在回调函数中遍历数据并将其添加到表格中，同时更新分页条。