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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
使用Vue实现一个树组件的示例
Nov 06 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 5.3.0 安装分析心得
2009/08/07 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
angular.foreach 循环方法使用指南
2015/01/06 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Python数组遍历的简单实现方法小结
2016/04/27 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
超简单使用Python换脸实例
2019/03/27 Python
python微信撤回监测代码
2019/04/29 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python yield关键词案例测试
2019/10/15 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
如何查找网页漏洞
2016/06/22 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
大学毕业感言
2014/01/10 职场文书
销售会计岗位职责
2014/03/15 职场文书
世博会口号
2014/06/20 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python