layui表格分页不生效怎么办-Layui教程-PHP中文网

首页

web前端

Layui教程

layui表格分页不生效怎么办

藏色散人

Nov 19, 2020 am 11:46 AM

layui

layui表格分页不生效的解决办法：首先打开相应的代码文件；然后动态添加代码为“var dom = $("425a2bec2949eab4bf160c22d1f314d9”即可。

”即可。

layui表格分页不生效怎么办

本教程操作环境：windows7系统、layui2.5.6版，该方法适用于所有品牌电脑。

推荐：《layUI教程》

layui之layer打开table后分页无效的解决方法

1.原代码：

<body>
<div id="showalladdableavms" style="display: none;width:100%">
    <table id="demo" lay-filter="test"></table>
</div> -->
</body>
<script>
filldata(table,"#demo","getDateForUserJurisdiction.gds");
layer.open({
                               type:1,
                               title:"添加机器",
                               maxmin:true,
                               area:["100%","100%"],
                               btn:["确认添加"],
                               content: $("#showalladdableavms").html(),
                               success: function (layero) {
                              var btn = layero.find(&#39;.layui-layer-btn&#39;);
                              btn.css({&#39;position&#39;:&#39;relative&#39;,&#39;top&#39;:"-93%","text-align":"left","left":"8%"});
                              },
                              btn1:function(index, layero){
                                  //console.log(layero, index);
                                  var res = getoperavms(&#39;demo&#39;);
                                  console.dir(res)
                              }
                             });
function filldata(table,id,url){
              table.render({
                  elem: id,
                  height:"560"
                  ,url:url //数据接口
                  ,method: &#39;POST&#39;
                  ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                  ,page:true/*  { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            first: true //显示首页
                           ,last: true //显示尾页
                  } */
                   ,limits : [10,20,30]
                   ,limit:10
                  ,request: {
                    pageName: &#39;page&#39;,//页码的参数名称，默认：page
                  } 
                  ,cols: [[ //表头
                             {checkbox:true} 
                          ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true}
                          ,{field: &#39;avm&#39;, title: &#39;机器编号&#39;, width:80}
                          ,{field: &#39;company&#39;, title: &#39;公司名称&#39;, width:80}
                          ,{field: &#39;area&#39;, title: &#39;区域&#39;, width:80, sort: true}
                          ,{field: &#39;circuit&#39;, title: &#39;线路&#39;, width:80} 
                          ,{field: &#39;position&#39;, title: &#39;位置&#39;, width: 177}
                          ,{field: &#39;goodsxml&#39;, title: &#39;商品库&#39;, width: 80, sort: true}
                          
                        ]]
                  ,where : {
                  //传值 startDate : startDate,
                          allavm:&#39;yes&#39;
                    }
                  ,response: {
                         // statusName: &#39;code&#39; //数据状态的字段名称，默认：code
                         //,statusCode: 200 //成功的状态码，默认：0
                         //,msgName: &#39;message&#39; //状态信息的字段名称，默认：msg
                         countName: &#39;total&#39; //数据总数的字段名称，默认：count
                         ,dataName: &#39;rows&#39; //数据列表的字段名称，默认：data
                        }
                   /* done:function(){
                             layer.open({
                                   type:1,
                                   maxmin:true,
                                   area:["800px","600px"],
                                   content: $("#showalladdableavms")
                                 });
                             } */
                 });
        }
</script>

2.现象：分页，选择框等无法操作，查了查说是html()得到的会丢失dom对象的事件，如果直接用dom会出现一只无法展示dom内容的问题。

3.解决：动态添加：

var dom = $("<div id=&#39;showalladdableavms&#39; style=&#39;display:none;width:100%&#39;><table id=&#39;demo&#39; lay-filter=&#39;test&#39;></table></div>");
$(&#39;body&#39;).append(dom)

这种方式可以很好的解决写死在页面里的dom对象打开时不展示，暗灰色调的问题，同时，dom对象的事件也得到了支持，完美

以上是layui表格分页不生效怎么办的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何使用Layui的流块模块进行无限滚动？Mar 18, 2025 pm 01:01 PM

文章讨论了使用Layui的流量模块进行无限滚动，涵盖设置，最佳实践，性能优化和自定义，以增强用户体验。

如何使用Layui的元素模块来创建选项卡，手风琴和进度条？Mar 18, 2025 pm 01:00 PM

本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素，例如选项卡，手风琴和进度条，突出显示HTML结构，初始化和常见的陷阱，以避免。

如何自定义Layui旋转木制模块的外观和行为？Mar 18, 2025 pm 12:59 PM

本文讨论了自定义Layui的Carousel模块，重点介绍了外观和行为的CSS和JavaScript修改，包括过渡效果，自动播放设置以及添加自定义导航控件。

如何使用Layui的旋转木载模块来创建图像滑块？Mar 18, 2025 pm 12:58 PM

该文章指导使用Layui的Carousel模块用于图像滑块，详细介绍设置的步骤，自定义选项，实现自动播放和导航以及性能优化策略。

如何将Layui的上传模块配置为限制文件类型和尺寸？Mar 18, 2025 pm 12:57 PM

本文讨论了使用Accept，Exts和Size属性来限制Layui的上传模块，以限制文件类型和尺寸，并自定义错误消息以违反。

如何使用Layui的图层模块来创建模态窗口和对话框？Mar 18, 2025 pm 12:46 PM

本文介绍了如何使用Layui的图层模块创建模态窗口和对话框，详细设置，类型，自定义和常见的陷阱要避免。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

WebStorm Mac版

好用的JavaScript开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。