应直接修改 Layui 的 CSS 类（如 .layui-laypage a、.layui-laypage-curr 等）来定制分页样式，而非配置 table.render() 的 page 选项；因 Layui 使用内联样式，覆盖时需加 !important；隐藏分页栏应使用 display: none，而非设置 page: false。
直接改 CSS 类，别碰 table.render() 的 page 配置
分页组件的样式跟 table.render() 里的 page 配置完全无关。你往里面加 theme、prev 或者 limit 字段，对颜色、边框、字体大小这些视觉表现毫无影响。真正起作用的是 layui 自带的 css 类：.layui-laypage 及其子类。
常见错误是翻遍文档找“分页主题色配置项”，结果白忙活——Layui 没提供 JS 控制样式的接口，只留了 CSS 覆盖路径。
-
.layui-laypage a：控制所有页码按钮（含上一页、下一页）的背景、文字、边框 -
.layui-laypage .layui-laypage-curr：当前页按钮，重点改这里突出选中态 -
.layui-laypage em：渲染“共 x 条”文字的容器，注意它不是span或div -
.layui-laypage .layui-laypage-spr：省略号（…）
由于 Layui 内联样式优先级高，建议所有覆盖规则加 !important，比如：
.layui-laypage a { background-color: #1FB1EA !important; color: #fff !important; }
为什么用 !important 不算 hack？
因为 Layui 在渲染时会往按钮上写内联 style，比如 style="background-color: #009688;"，普通 CSS 选择器根本压不住。不用 !important，你写的样式大概率被忽略。
这不是偷懒，是必须步骤。实测不加 !important 的修改在 Chrome DevTools 里能看到“被划掉”，说明未生效。
- 只对需要覆盖的属性加
!important，比如color、background-color、border - 不要整条规则都加，避免后续维护困难
- 如果项目用了 scoped CSS（如 Vue 单文件组件），需用
:deep(.layui-laypage a)等穿透写法
想改“共 x 条”的位置或颜色？先看 layout 是否包含 count
“共 x 条”默认插在 prev 和 next 按钮之间，但它是纯文本节点，没 class、没 id，CSS 无法定位。强行用 .layui-laypage em 改颜色可以，但移动位置不行。
真正可控的方式是显式声明 layout，把 count 当作独立项：
page: {
layout: ['count', 'prev', 'page', 'next'],
count: '共 <code>data.count</code> 条'
}
注意两点：
-
layout数组里必须包含'count'，否则“共 x 条”彻底不显示 -
count字段值支持模板字符串，<code>data.count</code>会被自动替换为真实总数 - 如果后端返回字段名不是
count（比如叫total），得配response: { count: 'total' }，否则显示“共 undefined 条”
隐藏分页栏又保留分页逻辑？别设 page: false
很多人想“去掉分页符”，第一反应是把 page 设成 false。这会导致表格全量加载数据、不发带 page/limit 的请求——服务端分页直接废掉。
正确做法是 CSS 隐藏容器：
- 全局加：
.layui-table-page { display: none !important; } - 或在
done回调里执行：done: function() { $('.layui-table-page').hide(); } - 千万别用
.remove()—— Layui 内部事件绑定依赖这个 DOM 节点，删了翻页就失效
最易忽略的一点：如果你用了 table.reload()，新渲染的分页栏会重新出现，所以每次 reload 后都得再 hide 一次，或者干脆用全局 CSS 一劳永逸。
