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

layui分页怎么根据不同屏幕宽度隐藏部分按钮

大宇姑娘_8305

大宇姑娘_8305

发布时间:2026-08-18 08:55:03

|

668人浏览过

|

来源于php中文网

原创

直接从 page.layout 数组中移除对应字符串即可隐藏按钮,如小屏仅保留页码和上下翻应设为 ['page', 'prev', 'next'];响应式切换必须通过 table.reload() 显式传入新 page 配置,且应监听表格父容器宽度而非 window。

layui分页怎么根据不同屏幕宽度隐藏部分按钮

page.layout 里删掉不需要的项就能隐藏对应按钮

想让「上一页」「跳转框」或「每页数量选择」在小屏消失,不是靠 CSS 隐藏,而是直接从 page.layout 数组里移除对应字符串。Layui 渲染分页栏时,只按 layout 里写的顺序生成 DOM;没写的,压根不创建——没有元素,自然不会占位、不会错乱、reload 也不反弹。

常见按钮对应的 layout 字符串有:'count'(总条数)、'prev'(上一页)、'page'(页码)、'next'(下一页)、'limit'(每页数量)、'refresh'(刷新)、'skip'(跳转输入框)。比如小屏只想留页码和上下翻,就写:layout: ['page', 'prev', 'next']。

  • 别写 'skip' → 跳转框彻底不渲染,比用 CSS 隐藏 .layui-laypage-skip 干净得多
  • 漏掉 'limit' → 每页数量选择器消失,但 page.limit 仍生效,服务端分页逻辑不受影响
  • 'count' 和 'refresh' 同理:删了就没了,不残留空白或事件绑定

响应式切换 layout 必须 reload,且不能只改 page 对象

不能在 resize 或 ResizeObserver 里只改 table.config.page.layout,那只是内存里的配置,表格 UI 不会变。必须调用 table.reload() 并显式传入新 page 配置,否则等于白操作。

尤其注意:reload 时若未传 page,会沿用初始化时的 layout;所以每次切换都要完整带过去,哪怕其他字段(如 url、where)不变。

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

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

下载
  • 正确写法:table.reload('demo', { page: { layout: ['page', 'prev', 'next'] } })
  • 错误写法:table.config.page.layout = [...]; table.reload('demo'); → layout 不更新
  • 如果启用了服务端分页,reload 会重新请求数据;不想重复拉,提前缓存 where 或加 page: { curr: table.config.page.curr } 保持当前页码

监听容器宽度而非 window,避免误触发

表格分页栏是否该隐藏按钮,取决于它自己所处容器的宽度,不是整个屏幕。监听 window.resize 在侧边栏展开、弹窗遮挡、地址栏收起时都会误判,导致按钮闪现或错失隐藏时机。

应该监听表格父容器(比如 #demo 的父级 div),用 ResizeObserver 更精准:

const container = document.querySelector('#demo').parentElement;
const ro = new ResizeObserver(() => {
  const width = container.clientWidth;
  if (width < 768) {
    table.reload('demo', { page: { layout: ['page', 'prev', 'next'] } });
  } else {
    table.reload('demo', { page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] } });
  }
});
ro.observe(container);
  • 别在 done 回调里反复调用 reload,容易因 DOM 尚未就绪导致样式错乱
  • 容器需有明确宽度(比如 width: 100% 或固定值),否则 clientWidth 可能为 0
  • 移动端 Safari 对 ResizeObserver 支持良好(2026 年已全覆盖),无需降级到 window.resize

隐藏按钮后要注意的两个细节

layout 删掉项是干净的,但仍有两处容易被忽略:

  • 某些自定义主题 CSS 可能给 .layui-laypage 设了固定 height 或 padding,当按钮减少后,高度没自动收缩,造成底部多出空白——检查 computed 样式,优先删掉这些硬编码尺寸
  • 如果用了 page.limits 但删了 'limit',用户仍可通过 API 调用 table.reload({ page: { limit: 50 } }) 切换每页条数,只是 UI 上不暴露入口;这属于预期行为,不是 bug

真正要小心的是:别把 layout 当成开关数组来回 push/splice,每次 reload 都应传入确定的、完整的新数组,避免状态漂移。

热门AI工具

更多
豆包大模型

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

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

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

UP简历
UP简历 Hot

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

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

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

PixPix
PixPix Hot

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2323

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5023

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6110

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5618

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

803

2024.05.22

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

3871

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

6548

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

774

2025.12.30

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

0

2026.10.08

热门下载

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

精品课程

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

共98课时 | 17.7万人学习

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

共98课时 | 20.6万人学习

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

共83课时 | 14.9万人学习

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

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