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实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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 文章采集正则代码
2009/12/28 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php curl 上传文件代码实例
2015/04/27 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
人事部专员岗位职责
2014/03/04 职场文书
国企干部对照检查材料
2014/08/22 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
安全检查汇报材料
2014/12/26 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
python缺失值的解决方法总结
2021/06/09 Python