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 Selector选择器小结
May 06 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
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的header和asp中的redirect比较
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
javascript的this关键字详解
2019/05/20 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python实现按长宽比缩放图片
2018/06/07 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python 移动光标位置的方法
2019/01/20 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
Java程序员常见面试题
2015/07/16 面试题
上班玩游戏检讨书
2014/02/07 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
优质服务标语口号
2015/12/26 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
MongoDB支持的索引类型
2022/04/11 MongoDB