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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js调用css属性写法
Sep 21 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php截取中文字符串函数实例
2015/02/23 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
js对象的比较
2011/02/26 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
办公室文员工作职责
2014/01/31 职场文书
四年级下册教学反思
2014/02/01 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
小班上学期个人总结
2015/02/12 职场文书
商务司机岗位职责
2015/04/10 职场文书
停电通知范文
2015/04/16 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
食品安全主题班会
2015/08/13 职场文书
贷款担保书范本
2015/09/22 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书