springboot项目分页查询的前端和后端代码

前端代码：

// 定义分页查询方法
function getPageData(pageNum) {
    $.ajax({
        type: 'GET',
        url: '/api/user?pageNum=' + pageNum,
        success: function (data) {
            var content = "";
            $.each(data.content, function (index, item) {
                content += "<tr>";
                content += "<td>" + item.id + "</td>";
                content += "<td>" + item.name + "</td>";
                content += "<td>" + item.age + "</td>";
                content += "<td>" + item.email + "</td>";
                content += "</tr>";
            });
            $('#userTable tbody').html(content);
            // 渲染分页条
            renderPageNavigator(data.pageNum, data.totalPages);
        }
    });
}

// 渲染分页条
function renderPageNavigator(pageNum, totalPages) {
    var navigator = "<ul class='pagination'>";
    if (pageNum == 1) {
        navigator += "<li class='disabled'><a href='#'>上一页</a></li>";
    } else {
        navigator += "<li><a href='#' onclick='getPageData(" + (pageNum - 1) + ")'>上一页</a></li>";
    }
    for (var i = 1; i <= totalPages; i++) {
        if (i == pageNum) {
            navigator += "<li class='active'><a href='#'>" + i + "</a></li>";
        } else {
            navigator += "<li><a href='#' onclick='getPageData(" + i + ")'>" + i + "</a></li>";
        }
    }
    if (pageNum == totalPages) {
        navigator += "<li class='disabled'><a href='#'>下一页</a></li>";
    } else {
        navigator += "<li><a href='#' onclick='getPageData(" + (pageNum + 1) + ")'>下一页</a></li>";
    }
    navigator += "</ul>";
    $('#pageNavigator').html(navigator);
}

后端代码：

@GetMapping("/user")
public Page<User> getUserByPage(@RequestParam(defaultValue = "1") int pageNum,
                                @RequestParam(defaultValue = "10") int pageSize) {
    Pageable pageable = PageRequest.of(pageNum - 1, pageSize);
    return userRepository.findAll(pageable);
}

以上代码是以 Spring Boot + jQuery + Bootstrap 为例，实现了一个简单的分页查询功能。其中，前端代码通过 jQuery 发送 AJAX 请求，后端代码利用 Spring Data JPA 提供的分页查询功能，返回指定页码的数据。