• 技术文章 >web前端 >Layui教程

    layui表格分页不生效怎么办

    藏色散人藏色散人2020-11-30 17:03:11原创119

    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表格分页不生效怎么办的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:layui
    上一篇:layui怎么实现数据绑定 下一篇:layui如何获取复选框的值以及如何为复选框赋值
    第14期线上培训班

    相关文章推荐

    • layui框架属于前端还是后端• layui怎么实现下载功能• layui.laypage怎么用• layui 表格中怎么显示图片

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网