Layui前端分页需手动切片并显式配置page对象，data传全量数组时page必须为对象而非true，否则分页栏不渲染；每次翻页或改limit须重render并更新curr、count等参数。
直接用 data 传全量数组 + 手动切片 + 显式配置 page 对象，就能实现前端内存分页。layui 不会自动帮你切数据，也不认 page: true 这种布尔值写法——它只在后端模式下才响应布尔值，前端模式必须写成对象。
为什么写了 page: true 却没分页栏？
Layui 表格检测到你配了 url 或者没传 data 数组，就会强制走后端分页逻辑，此时 page: true 才生效；一旦你用 data 传数组，它就切换到前端模式，page 必须是对象，否则整个分页控件不渲染。
-
page: true在前端模式下完全被忽略，连 layout 都不会显示 - 必须写成
page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], count: 200, limit: 10, curr: 1 } -
count必须手动设为全量数组长度，不能留空或用undefined - 如果
data是空数组或null，表格会渲染失败并静默报错Cannot read property 'length' of undefined
如何正确切片并重渲染表格？
每次翻页或改 limit，都要重新计算起始索引、调用 table.render() 全量重绘。Layui 没有“局部更新 data”的 API，reload() 在前端模式下行为不稳定，容易丢 count 或沿用旧 url。
- 切片用原生
Array.prototype.slice(start, end)，别手误写成splice -
start = (curr - 1) * limit，end = start + limit，注意边界：若end > allData.length，slice()会自动截断，安全 - 每次
render()都要传新切片后的data和完整page对象（含curr），否则页码显示错位 - 监听事件用
layui.table.on('page(demo)', ...)和layui.table.on('limit(demo)', ...)，别漏后者——改每页条数时，curr可能越界，需手动校准
搜索/排序后怎么刷新分页？
前端分页本身不联动搜索和排序。你过滤或排序完数组，得到新数组后，得手动重 render，并重置 page.curr = 1，否则可能显示空白页（比如原 15 页，过滤后只剩 2 页，但 curr 还是 15）。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 搜索函数返回新数组（如
allData.filter(...)），不要修改原数组 -
table.render()时传入该新数组，并显式设page: { curr: 1, count: newArr.length, ... } - 别用
table.reload('id', { data: newArr })—— 它可能残留旧url导致发请求，或不重算count - 字段名（
field）必须和新数组每个对象的 key 完全一致，大小写敏感，否则渲染为空白单元格
最易被忽略的是：改 limit 后不校准 curr，以及以为 reload() 能替代 render()。前端分页本质就是“自己管数据、自己算页、自己重画”，Layui 只提供 UI 控件和事件钩子，不托管逻辑。
立即学习“前端免费学习笔记（深入）”；
