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 += `

${i}

` 就该警觉——这写法在数据量大或频繁切换时会丢事件监听、清空焦点、触发 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"，且不能是 标签（键盘用户会误触），得用 并设 disabled。

点击“下一页”后，滚动位置怎么不跳到顶部

默认行为是页面跳回 顶部，对长表单或带锚点的页面极不友好。解决方法很简单，但常被忽略：

• 在 fetch 成功回调里调用 window.scrollTo({ top: 0, behavior: 'smooth' }) 是错的——它强制滚顶；
• 真正要保留位置，得在发起请求前记下 scrollY，等新内容渲染完再 window.scrollTo({ top: savedY })；
• 如果用了 Vue/React 等框架，注意 DOM 更新时机：scrollTo 得放在 nextTick 或 useEffect 的依赖更新后执行。

最常被绕开的其实是边界处理：比如最后一页点了“下一页”，接口返回空数组，前端没判断就清空列表，用户看到一片白。这类逻辑不在视觉层，却决定分页控件到底能不能用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！