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>

 

posted @   每天进步多一点  阅读(1582)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示