穿梭框分页必须服务端实现，依赖data、total、page_size三字段；左右数据需独立维护状态，翻页只刷新左侧，右侧持久化targetlist，避免选中丢失和总数不准。
穿梭框分页不能靠前端本地切片实现，必须和服务端分页逻辑对齐；否则选中状态丢失、总数不准、翻页后右侧已选项清空——这些问题全是因为把分页当成了“UI 动画”来处理。
为什么 jQuery 穿梭框 + slice() 分页会丢选中项
常见做法是把全部数据一次性拉到前端，用 slice() 每次只渲染一页进 #source，但问题立刻暴露：
-
#target里的已选项不在当前页数据中，切换页码时无法回显，用户以为“刚选的没了” - 右侧列表数据没做持久化管理，每次刷新或翻页都重新初始化，
selected状态彻底丢失 - 后端返回的
total是全局总数，但前端用data.length算总页数，一加搜索/过滤就错 - 用户点“第5页”，实际服务端只有42条数据、共5页，第5页请求返回空数组，前端却继续渲染空白
穿梭框分页必须依赖的三个后端字段
接口至少得返回这三项，缺一不可：
-
data：当前页的结构化数组，每项含id和展示字段（如name），不能只给 ID 列表 -
total：全局总条数，用于计算总页数：Math.ceil(total / page_size) -
page_size或limit：明确告知前端本页容量，避免和前端硬编码不一致
额外建议字段：selected_ids（当前用户已选中的所有 ID 数组），用于翻页时高亮/禁用已选条目；is_last_page（布尔值）比判断 data.length === 0 更可靠。
左右两侧数据必须独立维护状态
别复用同一份 data 渲染左右两栏。正确做法是：
- 左侧（待选）用服务端返回的
data渲染，但每项要标记是否已在selected_ids中（例如加disabled或灰显） - 右侧（已选）维护一个独立数组
targetList，添加时push，移除时filter，不依赖任何分页逻辑 - 翻页时只刷新左侧 DOM，右侧保持不动；点击“添加”时，把左侧选中的项深拷贝进
targetList，同时更新selected_ids并发请求同步后端 - 若用 Element UI 或自定义 Table 实现，
:row-key必须设为id，否则跨页勾选状态无法绑定
分页按钮状态与请求防抖的关键细节
用户点“下一页”不是简单 page++ 就完事：
- 按钮点击后立刻执行：
button.disabled = true+ 添加loadingclass，防止连点 - 请求前校验：
if (nextPage > totalPages) return，避免发无效请求 - fetch 成功后，用
insertAdjacentHTML("beforeend", ...)替代innerHTML = ...，避免重置左侧已有的 checkbox 状态 - 失败时按钮文字改为“重试”，并绑定一次性事件监听器，点击后重发**相同参数**的请求（不是复用原 click handler）
真正难的不是写分页按钮，而是让左侧翻页不影响右侧状态、让已选 ID 能跨页识别、让页码跳转不触发重复提交——这些细节没压住，分页就只是个会动的假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
