laypage.render的elem参数必须传不带#号的id字符串或dom对象,传'#pagination'会因document.getelementbyid找不到节点而报错;容器需唯一存在且id拼写正确,不可与table.elem共用,count须随数据动态更新。

laypage.render 的 elem 参数必须传 ID 字符串(不带 #)
直接传 '#pagination' 会报 Uncaught TypeError: Cannot read property 'innerHTML' of null,因为 laypage 内部用的是 document.getElementById,它只认纯 ID 名,加 # 就当成普通字符串处理,找不到 DOM 节点。
正确写法只有两种:
-
elem: 'pagination'—— 传字符串 ID(最常用) -
elem: document.getElementById('pagination')—— 传 DOM 对象(适合动态创建的容器)
分页容器 HTML 必须存在且唯一
如果页面里没有 <div id="pagination"></div>,或者有多个同 ID 的元素,elem: 'pagination' 也会失败(后者只会取第一个,容易埋坑)。
常见误操作:
- 容器还没渲染完就执行
laypage.render(比如放在$(document).ready外面,或 DOM 插入逻辑之后没等渲染) - ID 拼写错误,比如写成
'paginaton'或大小写不一致(HTML ID 区分大小写) - 使用了 Vue/React 等框架,ID 被动态生成或作用域隔离,原生 JS 找不到
配合 table 使用时,分页容器不能和表格共用一个 ID
很多人把 table.render 的 elem 和 laypage.render 的 elem 设成同一个 ID,结果要么分页不显示,要么表格渲染失败。
必须分开:
- 表格容器:
<table id="data-table" class="layui-hide"></table> - 分页容器:
<div id="custom-page"></div> - 对应配置:
table.render({ elem: '#data-table', page: false })+laypage.render({ elem: 'custom-page', ... })
自定义位置后,count 值必须准确且可更新
分页容器挪到顶部、侧边或弹窗里,只是 UI 变了,但数据逻辑没变——count 还得靠后端返回,而且每次 reload 表格时,要同步更新 laypage.render 的 count 值(否则末页跳转会卡住)。
典型漏点:
- 第一次加载成功后没保存
res.data.count,导致后续翻页时laypage仍用初始值 - 筛选条件变更后,只重载表格,忘了调用
laypage.render({ elem: 'custom-page', count: newTotal })更新总页数 - 后端返回的
count是估算值(比如用COUNT(*)但加了复杂 WHERE),导致实际数据少于分页显示数











