Bootstrap分页需手动监听点击事件，通过data-page获取页码并拼接page和size参数请求后端；后端应返回分页元数据用于动态渲染带data-page的页码链接，并手动设置active类高亮当前页；total=0时不渲染分页栏。
分页组件怎么传当前页和每页条数给后端
Bootstrap 的 pagination 本身不发请求，只是个 UI 容器。你得自己监听点击事件，提取页码，再拼进 API 请求里。
常见错误是直接用 aria-current="page" 或 active 类去“猜”当前页——这不可靠，类名可能被手写或 JS 动态改；正确做法是把页码存在 data-page 属性里，点击时读取：
$('.pagination').on('click', 'a.page-link', function(e) {
e.preventDefault();
const page = $(this).data('page');
const size = 10; // 通常固定，也可从配置读
fetch(`/api/items?page=${page}&size=${size}`)
.then(r => r.json())
.then(data => renderList(data));
});
- 后端接口约定一般用
page（从 1 开始）和size，不是offset/limit，避免前端算偏移量出错 -
size建议由前端固定（如 10），不要让用户随意输——否则后端分页逻辑容易被绕过或拖垮数据库 - 点击链接后记得
e.preventDefault()，否则页面会跳转或刷新
如何动态渲染 Bootstrap 分页 HTML
后端返回的分页元数据（比如 total、page、size、pages）必须用来生成带 data-page 的 a 标签，不能硬编码 1~5 页。
典型错误：只渲染「上一页 / 下一页」和固定数字，结果第 12 页点不了；或者没禁用首尾页按钮，导致用户点到 page=0 或负数。
- 后端最好返回
first、last、prev、next这些链接（HATEOAS 风格），前端直接塞进href或提取page值 - 如果后端只返回
total和size，前端算总页数：Math.ceil(total / size)，再生成页码 —— 注意total=0时要特殊处理，避免渲染出「第 1 页」但无数据 - 当前页的
<a>必须加class="page-link disabled"并移除data-page，否则点它还会触发请求
为什么点了页码后分页样式没更新
因为 Bootstrap 的 .active 类不会自动同步，JS 渲染完新页码 HTML 后，得手动标记当前页。
最常漏的一步：拿到后端返回的 page: 3，渲染了 5 个 <a>，但没给第 3 个加 class="page-link active"，看起来像“卡在第 1 页”。
- 别依赖 CSS 选中状态做逻辑判断，但 UI 上必须显式设置
active类来高亮 - 如果用了 Vue/React，注意 key 要包含页码，否则列表 DOM 复用会导致样式残留
- 服务端渲染（SSR）场景下，首屏 HTML 里的
active是对的，但 JS 加载后没重置，也会错位 —— 初始化时先清空所有.active，再设当前页
后端返回 total=0 时要不要显示分页栏
不显示。空列表配一个只有「第 1 页」的分页栏，既误导用户，又增加无效请求。
这个边界情况很多人忽略，测试时只覆盖了有数据的 case。
- 判断条件很简单：
if (data.total > 0 && data.pages > 1)才渲染整个<nav aria-label="Page navigation">块 - 如果后端没返回
pages，就用Math.ceil(data.total / size) > 1 - 哪怕
total=1且size=10，也属于单页，不显示分页栏 —— 用户没翻页需求
分页的真正复杂点不在样式，而在前后端对「页码起点」「空数据响应」「按钮禁用逻辑」这三处的隐含约定是否一致。少一个对齐，就会出现点不动、跳错页、样式滞留的问题。
