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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Javascript异步编程async实现过程详解
Apr 02 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数组操作
2011/12/30 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
JS 建立对象的方法
2007/04/21 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
功能完善的小程序日历组件的实现
2020/03/31 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
三严三实对照检查材料
2014/08/25 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏