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命名空间的另一种实现
Aug 09 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
js中开关变量使用实例
Feb 24 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
基于jQuery拖拽事件的封装
Nov 29 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配置文件中最常用四个ini函数
2007/03/19 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
JS验证码实现代码
2017/09/14 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
公司出纳岗位职责
2013/12/07 职场文书
土建资料员岗位职责
2014/01/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
MySQL分布式恢复进阶
2022/07/23 MySQL