应只刷新表格tbody区域：用fetch获取数据后，通过innerHTML或replaceChildren更新tbody内容，避免整页重载；分页参数通过按钮data-page属性动态传递；请求时禁用按钮并显示加载态；更新后调用scrollIntoView锚定表格位置。
点击按钮后只刷新表格区域，不重载整页
直接用 fetch 请求新页数据，再用 innerHTML 或 replaceChildren() 更新 <tbody> 内容。别用 location.reload() 或表单提交——那会整页闪退，用户体验断层。
常见错误是把整个表格（包括 <thead>）都替换成新 HTML，结果表头重复或样式错位。正确做法是只操作 <tbody>：
- 给
<tbody>加个唯一id="data-body"或用document.querySelector('table tbody')定位 - 后端返回纯
<tr><td>...</td></tr>片段，前端直接塞进tbody - 若后端返回完整 JSON，前端用
map()拼出tr字符串，再赋值给innerHTML
分页参数怎么传给后端才不乱序
按钮点击时，必须把当前页码、每页条数作为查询参数发出去。别硬编码在 URL 里，也别靠全局变量维护页码——容易被多点几次搞崩。
推荐用按钮的 data-page 属性存当前页码，点击时读取并递增：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
const currentPage = parseInt(button.dataset.page) || 1;
const pageSize = 10;
fetch(`/api/data?page=${currentPage}&size=${pageSize}`)
.then(r => r.json())
.then(data => {
updateTableBody(data.items);
button.dataset.page = currentPage + 1;
});
});
注意：如果用户可跳页（如输入页码），就别用 dataset 存状态，改用独立变量或 React/Vue 的响应式状态管理。
按钮禁用与加载态要同步表格状态
网络请求期间，按钮必须置为 disabled，同时显示“加载中…”文字，否则用户连点三次，可能触发三并发请求，后到的数据覆盖先到的，表格内容错乱。
关键点：
- 发请求前设
button.disabled = true，并备份原文字：button.dataset.originalText = button.textContent - 成功/失败后恢复：
button.disabled = false，button.textContent = button.dataset.originalText - 别只靠 CSS 隐藏按钮——禁用属性才是阻止重复提交的底线
- 如果表格区域有骨架屏，加载时显示它；没做的话，至少清空
tbody内容，避免旧数据残留
滚动位置卡在顶部？得手动锚定表格
分页后页面自动滚回顶部，是因为 DOM 替换触发了浏览器默认行为。解决方法不是禁止滚动，而是让视觉焦点回到表格顶部：
- 更新完
tbody后，调用table.scrollIntoView({ block: 'nearest' }) - 如果表格本身不高，用
table.parentElement.scrollIntoView({ behavior: 'smooth' })更自然 - 千万别对
window.scrollTo(0,0)——用户可能正在看下半屏，强制拉回很反直觉 - 若表格在 modal 或固定高度容器内，需对容器调用
scrollTop = 0，而不是整页
分页看似只是换几行数据，但按钮状态、滚动锚点、请求并发控制，任何一个漏掉都会让用户觉得“卡”或“不对劲”。尤其移动端，手指一点，反馈必须即时、确定、可逆。
