layTable 的 page.layout 数组控制分页元素显隐与顺序,仅认 ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] 关键词;需配合 limit 值、done 回调 DOM 操作、theme 与 CSS 微调,并确保后端返回有效 count 字段。
layTable 的 page.layout 控制分页元素显隐和顺序
layui 表格内置分页的样式调整,核心靠 page.layout 数组控制——它不是 css 覆盖,而是决定哪些组件渲染、按什么顺序排。写错字符串或漏掉必要字段,分页就直接失效。
-
layout只认固定关键词:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],写成'pages'或'pagination'会静默忽略 - 想隐藏跳转输入框(skip)和每页条数下拉(limit),只留总数、上/下页、页码:必须写
layout: ['count', 'prev', 'page', 'next'],且不能传limits数组(否则 limit 下拉仍会渲染) -
limit字段必须存在(如limit: 15),否则翻页请求里缺limit参数,后端收不到每页数量 - 如果删了
limits又想保留每页条数可选,得在request回调里手动补limit到where中
prev/next 等按钮文本无法直接配置,需 DOM 操作
layui 不允许通过 page.prev 或 page.next 直接设 HTML 内容,它们只接受纯字符串,且对图标、换行、内联样式完全无效。真要加 icon 或改结构,只能等表格渲染完再操作 DOM。
- 必须在
done回调里操作:done: function(res, curr, count) { $('.layui-laypage-prev').html('◀ 上一页'); } - 不能在
render前或init阶段操作,此时分页 DOM 还没生成,$()查不到元素 - 如果用了独立
laypage.render,和表格分页是两套逻辑,别混用——表格的.layui-laypage-prev和独立laypage的容器是不同节点
自定义主题色和尺寸需配合 theme + CSS 微调
page.theme 只能改主色(如 theme: '#1e9fff'),但按钮圆角、间距、字体大小等细节仍需 CSS 补充,且选择器必须足够具体,否则被 layui 默认样式覆盖。
- 主题色生效前提是
theme值合法(十六进制或英文颜色名),写成theme: 'blue'会失败 - 修改跳转框宽度:
.layui-laypage-skip input { width: 60px; },但要加!important或提高选择器权重 - 调整「共 x 条」文字位置:
.layui-laypage-count { margin-left: 10px; },注意它默认是 inline 元素 - 避免全局污染:建议给表格容器加唯一 class(如
class="my-table"),再写.my-table .layui-laypage-count
服务端分页下,count 字段缺失会导致分页卡死
即使 layout 和 theme 都配对了,只要后端返回 JSON 缺 count 字段,或者值为 0 / null,laypage 就无法计算总页数,翻到末尾会空白或无限加载。
- 后端必须返回准确的总记录数:
{"code":0,"msg":"","count":1234,"data":[...]} - 前端不要依赖
res.data.length算 count——那是当前页数据量,不是总数 - 筛选条件变更时(如搜索框输入),必须同步重载
table.reload并传新where,否则分页栏显示的 count 还是旧值 - 如果用了独立
laypage.render,每次 reload 后还得手动调laypage.render({ count: newTotal })更新


















