layui表格分页不生效原因排查

作者 : MOOMOO 本文共2353个字,预计阅读时间需要6分钟 发布时间: 2022-05-3 共31人阅读

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

1.原代码:

  1. <body
  2.   <div id=”showalladdableavms” style=”display: none; width: 100%”>
  3.     <table id=”demo” lay-filter=”test”></table>
  4.   </div>
  5. </body>
  6. <script>
  7.   filldata(table, “#demo”, “getDateForUserJurisdiction.gds”);
  8.   layer.open({
  9.     type: 1,
  10.     title: “添加机器”,
  11.     maxmin: true,
  12.     area: [“100%”, “100%”],
  13.     btn: [“确认添加”],
  14.     content: $(“#showalladdableavms”).html(),
  15.     success: function (layero) {
  16.       var btn = layero.find(“.layui-layer-btn”);
  17.       btn.css({
  18.         position: “relative”,
  19.         top: “-93%”,
  20.         “text-align”: “left”,
  21.         left: “8%”,
  22.       });
  23.     },
  24.     btn1: function (index, layero) {
  25.       //console.log(layero, index);
  26.       var res = getoperavms(“demo”);
  27.       console.dir(res);
  28.     },
  29.   });
  30.   function filldata(table, id, url) {
  31.     table.render({
  32.       elem: id,
  33.       height: “560”,
  34.       url: url, //数据接口
  35.       method: “POST”,
  36.       cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  37.       page: true /*  { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) – 详见文档
  38.                             first: true //显示首页
  39.                            ,last: true //显示尾页
  40.                   } */,
  41.       limits: [10, 20, 30],
  42.       limit: 10,
  43.       request: {
  44.         pageName: “page”, //页码的参数名称,默认:page
  45.       },
  46.       cols: [
  47.         [
  48.           //表头
  49.           { checkbox: true },
  50.           { field: “id”, title: “ID”, width: 80, sort: true },
  51.           { field: “avm”, title: “机器编号”, width: 80 },
  52.           { field: “company”, title: “公司名称”, width: 80 },
  53.           { field: “area”, title: “区域”, width: 80, sort: true },
  54.           { field: “circuit”, title: “线路”, width: 80 },
  55.           { field: “position”, title: “位置”, width: 177 },
  56.           { field: “goodsxml”, title: “商品库”, width: 80, sort: true },
  57.         ],
  58.       ],
  59.       where: {
  60.         //传值 startDate : startDate,
  61.         allavm: “yes”,
  62.       },
  63.       response: {
  64.         // statusName: ‘code’ //数据状态的字段名称,默认:code
  65.         //,statusCode: 200 //成功的状态码,默认:0
  66.         //,msgName: ‘message’ //状态信息的字段名称,默认:msg
  67.         countName: “total”, //数据总数的字段名称,默认:count
  68.         dataName: “rows”, //数据列表的字段名称,默认:data
  69.       },
  70.     });
  71.   }
  72. </script>

2.现象:

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

3.解决:动态添加:

  1. var dom = $(“<div id=’showalladdableavms’ style=’display:none;width:100%’><table id=’demo’ lay-filter=’test’></table></div>”);
  2. $(‘body’).append(dom)

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

1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » layui表格分页不生效原因排查

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论