layui分页如何设置简易模式

作者:袖梨 2026-08-10

Layui 没有“简易模式”配置项,所谓简易即不发请求、不分页、直渲静态数据:必须删掉 url、不设 page(而非设为 false)、显式传入 data 数组,且字段名与 cols.field 严格一致。

Layui 没有“简易模式”这个配置项,所谓简易,就是不用分页、不走远程、只渲染静态数据——删掉 urlpage 相关配置,直接传 data 数组即可。

table.render 里根本没有 simple 参数

翻遍 layui 2.8 源码和最新文档,table.render() 的 options 对象中不存在 simple 字段。社区里有人叫它“简单模式”,只是对一种轻量用法的俗称,不是内置功能。

  1. 只要写了 url,哪怕同时写了 data,layui 也会忽略 data,强制发起 AJAX 请求
  2. 只要写了 page: truepage: {...},就会启用分页栏并尝试计算总页数——哪怕你没给 count
  3. 真正实现“简易渲染”的唯一条件是:url 不填(或删掉)、page 不设为 true、显式提供 data 数组

怎么写才算真正简易?看这三行关键配置

下面这段代码就能跑起来,不发请求、不分页、不报错:

table.render({elem: '#demo',cols: [[{field: 'id', title: 'ID'},{field: 'username', title: '用户名'}]],data: [{id: 1, username: '张三'},{id: 2, username: '李四'}]});
  1. data 必须是数组,不能是 Promise 或函数
  2. 别写 url —— 写了就变远程加载,哪怕值是空字符串 '' 也会触发请求
  3. 别写 page —— 设成 false 没用,layui 只认 true 或对象;不写才是最干净的“禁用”

为什么加了 page: false 还会出分页栏?

因为 page: false 并非 layui 的合法配置值,它会被忽略,最终 fallback 到默认行为(即无分页),但如果你同时写了 url,它又会悄悄启用远程分页逻辑——表面没栏,实际 Network 里能看到请求发出。

  1. 验证是否真简易:打开浏览器 DevTools → Network 标签页 → 刷新页面 → 确认没有任何 XHR 请求
  2. 如果看到请求,立刻检查:url 是否残留、page 是否误配、data 是否被包裹在异步回调里(比如 data: getData()getData 是异步函数)
  3. 常见坑:data 里字段名和 colsfield 对不上,导致表格空白——这不是分页问题,是数据映射失败

想加搜索或重载?别碰 page 配置,用 reload 就行

简易模式下要支持搜索或刷新,不要改 page,直接调 table.reload() 并传新 data

table.reload('demo', {data: filteredList // 新数组,不是远程地址});
  1. reload 会保留原 colselem,只替换数据
  2. 不要在 reload 里传 url,否则就退出简易模式了
  3. 如果数据量大(比如上千条),简易模式会一次性渲染全部 DOM,卡顿明显——这时就得切回服务端分页,而不是硬撑

简易模式的本质是“跳过所有异步和分页逻辑”,它的边界很清晰:有 data、无 url、无 page。多一个字段,就可能多一次请求或多一行样式干扰。

相关文章

精彩推荐