layui实现table加载的示例代码
1 layui.use(['table','form'], function() { 2 $ = layui.jquery; 3 table = layui.table; 4 tableIns = initTable(); 5 }); 6 //加载列表 7 function initTable(){ 8 // 执行渲染 9 tableIns = table.render({ 10 id: 'idTest', 11 elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器) 12 size: 'lg', 13 height : 'full-20', // 容器高度 14 url : '/csCloud-admin/deviceController/getDeviceList.do', 15 where: { 16 'orgId':$("#orgId").val(), 17 'coldNum':$("#coldNum").val(), 18 'devType':$("#devType").val(), 19 'isUsed':$("#isUsedId").val() 20 }, 21 method : 'post', 22 cols : [ [ // 标题栏 23 { 24 field : 'rownum', 25 title : '序号', 26 width : 100, 27 sort : true 28 }, { 29 field : 'devNum', 30 title : '设备编号', 31 width : 200 32 }, { 33 field : 'devAlias', 34 title : '设备别名', 35 width : 100 36 }, { 37 field : 'devTypeVal', 38 title : '设备类型', 39 width : 100 40 }, { 41 field : 'devModel', 42 title : '设备型号', 43 width : 100 44 }, { 45 field : 'stateVal', 46 title : '设备状态', 47 width : 100 48 }, { 49 field : 'coldNum', 50 title : '冷库编号', 51 width : 100 52 }, { 53 field : 'orgName', 54 title : '所属机构', 55 width : 300 56 }, { 57 field : 'isUsedValue', 58 title : '状态', 59 width : 100 60 }, { 61 fixed : 'right', 62 width : 300, 63 align:'center', 64 toolbar : '#barDemo' 65 } 66 ] ], // 设置表头 67 page : true, 68 limits : [ 10,30, 60, 90, 150, 300 ], 69 limit : 10 70 }); 71 return tableIns; 72 }
1 <div class="layui-fluid"> 2 <div class="layui-row"> 3 <div class="layui-col-lg12"> 4 <table id="deviceTable"></table> 5 </div> 6 </div> 7 </div>