讲师中心 微信公众号
AI工具推荐 视频效率加速

layui分页怎么修改默认的limit数值

大丽大大_4376

大丽大大_4376

发布时间:2026-08-12 11:23:36

|

813人浏览过

|

来源于php中文网

原创

layui表格默认limit为10,正确写法仅page: { limit: 20 }且必须为数字;limits仅控制下拉选项,不影响首次加载;reload改limit须同步设curr=1,否则数据错位;后端需匹配limitName(如pageSize)并正确分页。

layui分页怎么修改默认的limit数值

page.limit 必须显式写正整数,不能省略或写成字符串

layui 表格默认 limit 是 10(不是 30,源码硬编码 fallback 值),但很多人误以为是 30。只要没在 page 对象里写 limit,就一定会走这个 10。常见错误包括:limit: "20"、limit: null、把 limit 写在顶层配置里(如 { limit: 20, url: '' }),这些全无效。

正确写法只有一种:page: { limit: 20 },且 20 必须是数字类型。如果用 page: true 初始化,limit 字段必须和它同级显式声明,否则照样回退到 10。

  • 初始化时漏掉 limit → 首次加载永远是 10 条
  • limits: [10, 20, 50] 却不配 limit: 20 → 下拉有 20 这个选项,但第一页还是 10 条
  • 后端返回数据条数没变?先检查 Network 里请求 URL 是否带 &limit=20

limits 数组不等于默认值,只是控制下拉菜单可选项

page.limits 只干一件事:决定分页栏下拉框里显示哪些数字。它完全不影响首次加载条数,也不参与数据请求逻辑。很多人配了 limits: [5, 10, 20, 50] 就以为默认会选最大值,其实 layui 不会自动推导,也不会 fallback 到数组最大项。

真正起作用的是 page.limit 的值,而且它必须出现在 limits 数组里,否则 UI 会悄悄回退到第一个值(比如 limits: [10, 20, 50] 但 limit: 15 → 实际生效的是 10),还不报错。

  • limits 长度必须 ≥ 2 才渲染可点击下拉;limits: [20] 会生成一个点不动的假输入框
  • 想彻底隐藏下拉?唯一可靠方式是 limits: [],再配合固定 limit
  • 移动端慎用超过 4 个选项,弹层容易被视口截断

reload 时改 limit 必须同步重置 curr,否则数据错位

用户点下拉选“每页 50 条”,你调 table.reload('id', { page: { limit: 50 } }),Layui 默认保留当前页码(比如第 3 页)。但后端按新 limit 计算偏移量时,(3 - 1) × 50 = 100,而旧逻辑可能是 (3 - 1) × 10 = 20,结果返回的数据块完全对不上——轻则空白,重则重复或漏行。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

Network 面板能看到请求参数是 ?page=3&limit=50,但返回内容跟预期不符,问题就出在这里。

  • 通用做法:table.reload('id', { page: { limit: 50, curr: 1 } }),强制回到第一页
  • 如果业务要求保持当前页(比如用户正在看第 5 页),后端必须支持按新 limit 重新计算 offset 并返回对应区间数据
  • 千万别用 table.destroy() + table.render() 替代 reload —— 排序状态、toolbar 模板、已绑定事件全丢

后端参数名不匹配会导致 limit 白设

前端写了 limit: 20,但表格数据没变,大概率是后端根本没收到这个值。Layui 默认用字段名 limit 发请求,但 Spring Boot、ThinkPHP 等框架常期待 pageSize 或 size。

这时候光改前端没用,请求发出去的还是 &limit=20,后端直接忽略。

  • 必须用 request: { limitName: 'pageSize' } 映射参数名
  • 同时确认后端响应里的总条数字段(默认 count)是否准确,否则分页按钮可能灰掉或页码错乱
  • 最隐蔽的坑:后端接到了 pageSize=20,但数据库查询没加 LIMIT,结果返回全量数据 → Layui 只截前 20 条,但总页数计算全崩

实际改 limit 最容易被忽略的点,是认为 limits 数组能影响默认行为,或者 reload 时只传 limit 不管 curr。这两个地方一错,页面看着正常,数据早就不对了。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2940

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2753

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

0

2026.10.21

Playwright 页面操作指南
Playwright 页面操作指南

Playwright页面操作专题汇集元素定位、点击与输入、等待响应、多页面切换、Iframe、事件监听及文件处理的已审核文章,便于按操作场景查阅示例与常见问题。

0

2026.10.21

Playwright 入门教程
Playwright 入门教程

Playwright入门专题汇集测试框架安装、VS Code配置、录制脚本、编写首个用例、运行调试及查看报告的已审核文章,帮助初学者搭建端到端测试流程。

0

2026.10.21

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

100

2026.10.16

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

80

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第十三期_前端开发
第十三期_前端开发

共98课时 | 17.9万人学习

第十二期_前端开发
第十二期_前端开发

共98课时 | 20.8万人学习

周末班(第一期)_前端开发
周末班(第一期)_前端开发

共83课时 | 15.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn