What to do if layui table pagination does not take effect-Layui Tutorial-php.cn

What to do if layui table pagination does not take effect

藏色散人

Release： 2020-11-30 17:03:11

Original

8283 people have browsed it

The solution for layui table paging not taking effect: first open the corresponding code file; then dynamically add the code as "var dom = $("
" will do.

" will do.

What to do if layui table pagination does not take effect

## The operating environment of this tutorial: Windows 7 system, layui version 2.5.6 , this method is applicable to all brands of computers.

Recommendation: "

layUI Tutorial"

Solution to the problem that paging is invalid after the layer of layui opens the table

1. Original code:

<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>

Copy after login

2. Phenomenon: paging, selection boxes, etc. cannot be operated. After checking, it is said that the event obtained by html() will lose the dom object. If you use it directly There will be a problem in dom that it cannot display the dom content.

3. Solution: Dynamically add:

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)

Copy after login

This method can solve the problem of hard-coding on the page The DOM object in is not displayed when it is opened, which is a problem with the dark gray tone. At the same time, the events of the DOM object are also supported, perfect

The above is the detailed content of What to do if layui table pagination does not take effect. For more information, please follow other related articles on the PHP Chinese website!