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

前端如何实现分页？

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

一、HTML 代码解释

1. 表格容器

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

1. 作用：定义表格，应用 Bootstrap 样式。
2. 说明：
   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>

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

3. 表格主体

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

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

4. 分页导航容器

html

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

1. 作用：生成分页按钮的容器。
2. 说明：
   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; // 总页数，初始为1
    loadPage(1); // 加载第一页数据
});

1. 作用：页面加载后初始化变量并加载数据。
2. 说明：
   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();
        }
    });
}

1. 作用：向后端请求数据并渲染到表格。
2. 说明：
   $.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); // 添加到导航
}

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

三、CSS 代码解释

1. 分页导航间距

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

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

2. 头像图片样式

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

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

3. 静态按钮样式

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

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

4. 操作按钮间距

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

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

<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 ID
    const $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;
    }