HTML动态分页关键看数据来源与交互方式：客户端分页仅适用于数百条数据，大数据量必须用服务端分页；接口需正确传递page（从1起）、limit并URL编码；页码渲染应避免innerHTML拼接，改用createElement和DocumentFragment；滚动位置需手动保存恢复；空响应等边界必须显式处理。
HTML动态内容分页不是加个按钮就能跑起来的事——关键看数据来源和交互方式。前端一次性加载所有数据再切页（客户端分页）只适合几百条以内的场景；真实项目里，只要数据来自接口、总量不确定或可能上万，就必须走服务器端分页，否则页面卡死、内存爆掉都是分分钟的事。
用 fetch + 服务端分页时，page 和 limit 参数怎么传才不翻车
后端接口通常要求明确传当前页码和每页条数，比如 /api/items?page=2&limit=10。但容易漏掉三个细节：
-
page必须从 1 开始（不是 0），否则第一页永远拿不到； -
limit要和服务端约定一致，前端改了值但没同步给请求参数，就会出现“显示 20 条”但接口仍按 10 条返回； - URL 编码必须做：用户在搜索框输中文或特殊符号，不 encodeURI() 包一层，请求直接 400。
页码栏渲染别用 innerHTML 拼字符串
看到网上一堆 html += `<li>${i}</li>` 就该警觉——这写法在数据量大或频繁切换时会丢事件监听、清空焦点、触发 XSS（尤其当页码含用户输入内容时）。更糟的是，每次重绘都销毁全部 DOM 节点，性能差 2–3 倍。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确做法是用
document.createElement('li')+appendChild()； - 如果页码多（比如 100 页），优先用
DocumentFragment批量插入； - 当前页必须加
aria-current="page"，且不能是<a></a>标签（键盘用户会误触），得用<button type="button"></button>并设disabled。
点击“下一页”后，滚动位置怎么不跳到顶部
默认行为是页面跳回 顶部，对长表单或带锚点的页面极不友好。解决方法很简单，但常被忽略：
立即学习“前端免费学习笔记（深入）”；
- 在
fetch成功回调里调用window.scrollTo({ top: 0, behavior: 'smooth' })是错的——它强制滚顶； - 真正要保留位置，得在发起请求前记下
scrollY，等新内容渲染完再window.scrollTo({ top: savedY })； - 如果用了 Vue/React 等框架，注意 DOM 更新时机：
scrollTo得放在nextTick或useEffect的依赖更新后执行。
最常被绕开的其实是边界处理：比如最后一页点了“下一页”，接口返回空数组，前端没判断就清空列表，用户看到一片白。这类逻辑不在视觉层，却决定分页控件到底能不能用。
