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

前端如何实现分页？

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

一、HTML 代码解释

1. 表格容器

html

1. 作用：定义表格，应用 Bootstrap 样式。
2. 说明：

   class=“table”：基础表格样式。

   class=“table-bordered”：显示表格边框。

   class=“table-hover”：鼠标悬停时行高亮。

2. 表格表头

html

    

1. 作用：定义表格列标题。
2. 说明：

    $.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 = $('

1. 作用：向后端请求数据并渲染到表格。
2. 说明：

   $.ajax：发送异步请求获取分页数据。

   response.list：当前页用户列表，response.totalPage：总页数。

   $tableBody.empty()：避免新旧数据叠加。

   updatePagination()：根据数据更新分页导航。

3. 分页导航更新函数 updatePagination

javascript
function updatePagination() {
    $pageNav.empty(); // 清空旧按钮
    // 上一页按钮
    const prevBtn = $('

html

    

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

javascript
function loadPage(pageNum) {
    currentPage = pageNum; // 更新当前页码
    $tableBody.html('