layui实现table加载的示例代码


Posted in Javascript onAugust 14, 2018

js实现:

layui.use(['table','form'], function() {
$ = layui.jquery;
table = layui.table;
tableIns = initTable();
});
//加载列表
function initTable(){
// 执行渲染
tableIns = table.render({
id: 'idTest',
elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器)
size: 'lg',
height : 'full-20', // 容器高度
url : '/csCloud-admin/deviceController/getDeviceList.do',
where: {
'orgId':$("#orgId").val(),
'coldNum':$("#coldNum").val(),
'devType':$("#devType").val(),
'isUsed':$("#isUsedId").val()
},
method : 'post',
cols : [ [ // 标题栏
{
field : 'rownum',
title : '序号',
width : 100,
sort : true
}, {
field : 'devNum',
title : '设备编号',
width : 200
}, {
field : 'devAlias',
title : '设备别名',
width : 100
}, {
field : 'devTypeVal',
title : '设备类型',
width : 100
}, {
field : 'devModel',
title : '设备型号',
width : 100
}, {
field : 'stateVal',
title : '设备状态',
width : 100
}, {
field : 'coldNum',
title : '冷库编号',
width : 100
}, {
field : 'orgName',
title : '所属机构',
width : 300
}, {
field : 'isUsedValue',
title : '状态',
width : 100
}, {
fixed : 'right',
width : 300,
align:'center',
toolbar : '#barDemo'
}
] ], // 设置表头
page : true,
limits : [ 10,30, 60, 90, 150, 300 ],
limit : 10
});
return tableIns;
}

jsp实现:

<div class="layui-fluid">
		<div class="layui-row">
			<div class="layui-col-lg12">
				<table id="deviceTable"></table>
			</div>
		</div>
	</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
layer插件select选中默认值的方法
Aug 14 #Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 #Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 #Javascript
JS通过位运算实现权限加解密
Aug 14 #Javascript
js中getter和setter用法实例分析
Aug 14 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python采集百度百科的方法
2015/06/05 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python 创建一维的0向量实例
2019/12/02 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
优秀民警事迹材料
2014/01/29 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
社区活动总结范文
2015/05/07 职场文书
步步惊心观后感
2015/06/12 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
九年级语文教学反思
2016/03/03 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android