layui表格分页不生效原因排查
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
},
});
}
</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对象的事件也得到了支持
本文属原创，转载请注明原文：http://www.zhimatong.com/jiaocheng/504.html
为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。
内容有用
在线
购物车
