layui表格分页不生效怎么办

互联网 20-11-19

layui表格分页不生效的解决办法：首先打开相应的代码文件；然后动态添加代码为“var dom = $("<div id='showalladdableavms' style='display:none;width:100%'>”即可。
”即可。

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

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

以上就是layui表格分页不生效怎么办的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： layui

layui表格分页不生效怎么办

相关资讯

标签推荐