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 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
js 幻灯片的实现
Dec 06 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
再探JavaScript作用域
2014/09/24 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现密码强度校验
2020/03/18 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
九年级物理教学反思
2014/01/29 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
公司经理聘任书
2014/03/29 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
运动会观后感
2015/06/09 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
基于Python实现将列表数据生成折线图
2022/03/23 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL