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

layui分页怎么在表格里嵌套分页

胖浩大大_7959

胖浩大大_7959

发布时间:2026-09-06 08:33:18

|

964人浏览过

|

来源于php中文网

原创

layui表格不支持在单元格内嵌套laypage分页控件,因会导致初始化冲突、事件错乱和渲染失败;应改用展开行+内联列表模拟,由后端返回子数据分页信息,前端仅做状态映射与手动切片。

layui分页怎么在表格里嵌套分页

layui 表格本身不支持「在表格单元格内再嵌套一个独立分页控件」——这不是设计目标,强行嵌套会导致 laypage 初始化冲突、DOM 重复绑定、事件错乱,甚至整个表格渲染失败。

为什么不能直接在 table 的 cell 里 render 第二个 laypage

layui 的 laypage.render() 会查找并接管指定容器内的所有分页结构,若你在 cols 的 templet 里动态插入另一个 div 并调用 laypage.render({ elem: '#subpage' }),会出现:

  • elem 被多次初始化(table 重绘时反复执行 templet,导致同一 ID 被重复绑定)
  • 分页按钮点击后无法正确触发回调,curr 值错乱或始终为 1
  • 父表格的 done 回调和子分页的 jump 回调互相干扰
  • 移动端触摸事件被拦截,翻页失效

替代方案:用「展开行 + 内联列表」模拟嵌套分页

真正可行的做法是放弃“嵌套分页控件”,改用 layui 提供的 showRow 展开行能力,在展开区域里放一个精简的、无分页的子表格(或 ul 列表),配合手动控制数据切片:

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

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

下载
  • 在主表格 cols 中加一列:{type: 'numbers', title: '操作', toolbar: '#rowBar'}
  • 定义 toolbar 模板,绑定 click 事件触发 table.expandRow()
  • 在 expandRow 的回调中,根据当前行 id 请求子数据(如 /api/children?pid=123&page=1&limit=5)
  • 子数据返回后,用 layui.view().render() 或简单 $('td[data-row-index="0"]').find('.sub-list').html(...) 渲染为带“上一页/下一页”文字链接的列表(不调用 laypage)
  • 点击“下一页”时,仅更新该行的子数据,不触发表格重渲染

如果真要显示“共 X 页,当前第 Y 页”文字,直接追加到分页栏就行

你不需要嵌套分页控件,只需要在主表格的 done 回调里补一句文字说明:

done: function(res, curr, count) {
  const totalPage = Math.ceil(count / this.limit);
  const $pageWrap = $('.layui-table-view .layui-table-page .layui-laypage');
  if ($pageWrap.length) {
    $pageWrap.append(`  共${totalPage}页,当前第${curr}页`);
    layui.element.init('laypage'); // 必须重载,否则新内容不生效
  }
}

注意:   是为了留白,避免文字紧贴按钮;layui.element.init('laypage') 这句不能省,否则追加的文字不会被 laypage 组件识别为有效 DOM。

容易被忽略的关键点

所有试图在 templet 函数里调用 laypage.render() 的做法,都会在表格刷新(比如排序、搜索、切换 limit)时崩溃。真正的分页逻辑必须由后端承担,前端只负责展示和跳转参数——哪怕你要“嵌套”,也得让后端把子数据的分页信息(count、curr、limit)随主数据一起返回,前端只是做状态映射,而不是二次初始化分页组件。

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

PixPix
PixPix Hot

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

豆包大模型

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

WorkBuddy

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

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

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

UP简历
UP简历 Hot

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

相关专题

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

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

2283

2023.08.11

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

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

4903

2023.10.09

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

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

5990

2024.03.19

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

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

5498

2024.03.22

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

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

783

2024.05.22

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

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

3771

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的相关内容,可以阅读本专题下面的文章。

6368

2024.03.06

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

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

774

2025.12.30

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

热门下载

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

精品课程

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

共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