当前位置：首页 > news >正文

【无标题】前端如何实现分页？

news 来源：原创 2025/6/15 3:35:31

前端如何实现分页？

以下是对代码的逐条总结与解释，按 HTML、JavaScript、CSS 顺序分模块列出，每条代码单独说明：

一、HTML 代码解释

1. 表格容器

html
<table class="table table-bordered table-hover">

作用：定义表格，应用 Bootstrap 样式。
说明：
class=“table”：基础表格样式。
class=“table-bordered”：显示表格边框。
class=“table-hover”：鼠标悬停时行高亮。

2. 表格表头

html
<thead><tr><th>选择</th><th>头像</th><th>用户名</th><th>邮箱</th><th>性别</th><th>状态</th><th>操作</th></tr>
</thead>

作用：定义表格列标题。
说明：
<th>：表头单元格，加粗居中显示，标识各列数据类型。

3. 表格主体

html
<tbody id="postList"><!-- 数据动态加载 -->
</tbody>

作用：动态加载数据的容器。
说明：
id=“postList”：供 JavaScript 选择和操作，初始为空。

4. 分页导航容器

html

<div id="pageNav" class="pagination justify-content-center"></div>

作用：生成分页按钮的容器。
说明：
id=“pageNav”：JavaScript 动态生成按钮的目标元素。
class=“pagination”：Bootstrap 分页样式。
justify-content-center：分页导航居中对齐。

二、JavaScript 代码解释

1. 初始化与全局变量

javascript
$(document).ready(function() {const rowsPerPage = 4; // 每页显示4条，与后端pageSize一致const $tableBody = $('#postList'); // 选择表格主体const $pageNav = $('#pageNav'); // 选择分页容器let currentPage = 1; // 当前页码let totalPages = 1; // 总页数，初始为1loadPage(1); // 加载第一页数据
});

作用：页面加载后初始化变量并加载数据。
说明：
rowsPerPage：前端每页显示数量，需与后端一致。
$tableBody 和 $pageNav：通过 id 选择 DOM 元素。
currentPage 和 totalPages：跟踪分页状态。
loadPage(1)：触发第一页数据加载。

2. 数据加载函数 loadPage

javascript
function loadPage(pageNum) {currentPage = pageNum; // 更新当前页码$tableBody.html('<tr><td colspan="7" class="text-center">加载中...</td></tr>'); // 显示加载状态

    $.ajax({type: 'GET', // GET请求url: '/admin/getUsersFromManagerWithPaging', // 后端分页接口data: { pageNum, pageSize: rowsPerPage }, // 传递页码和每页大小success: function(response) { // 成功回调const userList = response.list || []; // 当前页数据（默认空数组）totalPages = response.totalPage || 1; // 总页数（默认1页）$tableBody.empty(); // 清空旧数据if (userList.length > 0) { // 有数据时渲染userList.forEach(user => { // 遍历生成表格行const row = $('<tr>').attr('data-user-id', user.id) // 存储用户ID.append(/* 7个单元格，填充数据 */); // 生成各列内容$tableBody.append(row); // 添加行到表格});$pageNav.show(); // 显示分页导航} else { // 无数据时显示提示$tableBody.html('暂无用户数据');$pageNav.hide();}updatePagination(); // 更新分页按钮状态},error: function(error) { // 错误处理console.error('加载失败:', error);$tableBody.html('加载失败，请重试');$pageNav.hide();}});
}

作用：向后端请求数据并渲染到表格。
说明：
$.ajax：发送异步请求获取分页数据。
response.list：当前页用户列表，response.totalPage：总页数。
$tableBody.empty()：避免新旧数据叠加。
updatePagination()：根据数据更新分页导航。

3. 分页导航更新函数 updatePagination

javascript
function updatePagination() {$pageNav.empty(); // 清空旧按钮// 上一页按钮const prevBtn = $('<li class="page-item">').append($('<a class="page-link">').text('上一页'));if (currentPage === 1) prevBtn.addClass('disabled'); // 首页禁用else prevBtn.click(() => loadPage(currentPage - 1)); // 非首页绑定点击事件$pageNav.append(prevBtn); // 添加到导航// 计算可见页码范围（最多5个）const maxVisiblePages = 5;let startPage = Math.max(1, currentPage - 2); // 起始页（当前页-2，最小1）let endPage = Math.min(totalPages, startPage + 4); // 结束页（起始页+4，最大总页数）// 左侧省略号if (startPage > 1) $pageNav.append('...');// 生成页码按钮for (let i = startPage; i <= endPage; i++) {const btn = $('<li class="page-item">').append($('<a class="page-link">').text(i));if (i === currentPage) btn.addClass('active'); // 当前页高亮else btn.click(() => loadPage(i)); // 其他页绑定点击事件$pageNav.append(btn);}// 右侧省略号if (endPage < totalPages) $pageNav.append('...');// 下一页按钮const nextBtn = $('<li class="page-item">').append($('<a class="page-link">').text('下一页'));if (currentPage === totalPages) nextBtn.addClass('disabled'); // 尾页禁用else nextBtn.click(() => loadPage(currentPage + 1)); // 非尾页绑定点击事件$pageNav.append(nextBtn); // 添加到导航
}

作用：动态生成分页按钮，更新按钮状态。
说明：
maxVisiblePages = 5：最多显示 5 个页码，当前页居中。
startPage 和 endPage：计算可见页码范围，避免超出总页数。
disabled 类：禁用不可点击的按钮（如首页的 “上一页”）。
active 类：高亮当前页按钮。

三、CSS 代码解释

1. 分页导航间距

css
.pagination {margin-top: 20px;
}

作用：在分页导航上方添加 20px 间距，避免紧贴表格。
说明：提升页面布局美观度，增加呼吸感。

2. 头像图片样式

css
.table img {object-fit: cover;
}

作用：确保头像图片在固定尺寸内完整显示，裁剪多余部分。
说明：避免图片拉伸变形，保持比例，适合头像展示。

3. 静态按钮样式

css
.static {border: none;background: transparent;cursor: default;
}

作用：将状态按钮设为静态文本，不可点击。
说明：
border: none 和 background: transparent：移除按钮默认样式。
cursor: default：鼠标样式为默认，明确非交互性。

4. 操作按钮间距

css
.deletebtn, .editbtn {margin-right: 5px;
}

作用：在 “删除” 和 “编辑” 按钮右侧添加 5px 间距。
说明：避免按钮紧贴，提升点击准确性和视觉舒适度。

<table class="table table-bordered table-hover"><thead><tr><th>选择</th><th>头像</th><th>用户名</th><th>邮箱</th><th>性别</th><th>状态</th><th>操作</th></tr></thead><tbody id="postList"><!-- 数据将通过 AJAX 动态加载 --></tbody>
</table><!-- 分页导航 -->
<div id="pageNav" class="pagination justify-content-center"></div>

$(document).ready(function() {const rowsPerPage = 4;const $tableBody = $('#postList'); // 选择正确的 tbody IDconst $pageNav = $('#pageNav');let currentPage = 1;let totalPages = 1;// 初始化加载第一页loadPage(1);// 加载指定页数据function loadPage(pageNum) {currentPage = pageNum;$tableBody.html('<tr><td colspan="7" class="text-center">加载中...</td></tr>');$.ajax({type: 'GET',url: '/admin/getUsersFromManagerWithPaging',data: { pageNum, pageSize: rowsPerPage },success: function(response) {console.log('后端返回数据:', response);const userList = response.list || [];totalPages = response.totalPage || 1;$tableBody.empty();if (userList.length > 0) {userList.forEach(user => {const row = $('<tr>').attr('data-user-id', user.id).append($('<td>').html(`<input type="checkbox" class="rowCheckbox" data-user-id="${user.id}">`),$('<td>').html(`<img alt="${user.username}" src="${user.avatarUrl || 'https://picsum.photos/200/150'}" class="img-thumbnail" style="width: 50px; height: 50px;">`),$('<td>').text(user.username),$('<td>').text(user.email),$('<td>').text(user.gender || '未知'), // 确保字段存在$('<td>').html(`<button class="static">${user.status}</button>`),$('<td>').html(`<button class="deletebtn btn btn-danger btn-sm" data-user-id="${user.id}">删除</button><button class="editbtn btn btn-primary btn-sm" data-user-id="${user.id}">编辑</button>`));$tableBody.append(row);});$pageNav.show();} else {$tableBody.html('<tr><td colspan="7" class="text-center">暂无用户数据</td></tr>');$pageNav.hide();}updatePagination();},error: function(error) {console.error('分页数据加载失败:', error);$tableBody.html('<tr><td colspan="7" class="text-center">加载失败，请重试</td></tr>');$pageNav.hide();}});}// 更新分页导航function updatePagination() {$pageNav.empty();// 上一页按钮const prevBtn = $('<li class="page-item">').append($('<a class="page-link" href="#">').text('上一页'));if (currentPage === 1) {prevBtn.addClass('disabled');} else {prevBtn.click(function(e) {e.preventDefault();loadPage(currentPage - 1);});}$pageNav.append(prevBtn);// 页码按钮const maxVisiblePages = 5;let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);if (startPage > 1) {$pageNav.append($('<li class="page-item disabled">').append($('<a class="page-link" href="#">').text('...')));}for (let i = startPage; i <= endPage; i++) {const pageBtn = $('<li class="page-item">').append($('<a class="page-link" href="#">').text(i));if (i === currentPage) {pageBtn.addClass('active');} else {pageBtn.click(function(e) {e.preventDefault();loadPage(i);});}$pageNav.append(pageBtn);}if (endPage < totalPages) {$pageNav.append($('<li class="page-item disabled">').append($('<a class="page-link" href="#">').text('...')));}// 下一页按钮const nextBtn = $('<li class="page-item">').append($('<a class="page-link" href="#">').text('下一页'));if (currentPage === totalPages) {nextBtn.addClass('disabled');} else {nextBtn.click(function(e) {e.preventDefault();loadPage(currentPage + 1);});}$pageNav.append(nextBtn);}
});

css
.pagination {margin-top: 20px;
}.table img {object-fit: cover;
}.static {border: none;background: transparent;cursor: default;
}.deletebtn, .editbtn {margin-right: 5px;
}

@ApiOperation("用户分页")@ResponseBody@GetMapping("/getUsersFromManagerWithPaging")public Map<String,Object> getUsersFromManagerWithPaging(@RequestParam(value = "pageNum",defaultValue = "1")int pageNum,@RequestParam(value = "pageSize",defaultValue = "4")int pageSize){PageInfo<User> pageInfo =adminService.getUsersFromManagerWithPaging(pageNum, pageSize);List<User> list = pageInfo.getList();Map<String,Object> response=new HashMap<>();if(list.isEmpty()){response.put("info","暂无用户");}response.put("list",list);response.put("totalPage",pageInfo.getPages());return response;}