PHP前端开发

layui表格分页不生效怎么办

百变鹏仔 2个月前 (11-16) #layui
文章标签 分页
layui表格分页不生效的解决办法:首先打开相应的代码文件;然后动态添加代码为“var dom = $("”即可。”即可。

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

推荐:《layUI教程》

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

1.原代码:

<div>    <table></table></div> --&gt;<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><table></table></div>");$('body').append(dom)

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