以下是一个
使用Spring Boot和
MyBatis-Plus进行分页查询的简单示例，包括前端HTML和JS代码。
在后端，我们需要定义一个Controller来接收前端的分页请求并返回分页结果。这里
使用了
MyBatis-Plus提供的Page类来实现分页查询。在前端，我们
使用jQuery和Bootstrap来实现分页功能。
后端代码：
```
java
@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类进行分页查询：
```
java
@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);
}
}
```
前端代码：
```html
<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>
```
```
javascript
$(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.leng
th; 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对象，其中包含了当前页码、总页数和页码对应的数据。我们在回调函数中遍历数据并将其添加到表格中，同时更新分页条。
1013
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
