layui加载数据显示loading加载完成loading消失的实例代码


Posted in Javascript onSeptember 23, 2019

项目中,向后台请求数据,经常会出现较长的等待时间,这时我们需要一个loading转圈圈,接收到后台的数据时,让loading消失

这layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading

<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" />
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
 layui.use(['table','layer'], function(){
			 var table = layui.table;
			 var layer = layui.layer;
			 var index = layer.load(1); //添加laoding,0-2两种方式
			 //第一个实例
			 table.render({
			  elem: '#userTable',
			  height: 515,
			  method: 'POST', //方式
			  loading: true, //翻页加loading
			  url: weburl, //数据接口
			  request:{
			  	pageName: 'pageIndex',//页码的参数名称,默认:page
 					limitName: 'pageSize' //每页数据量的参数名,默认:limit
			  },
			  where:{
			  	invite_uid:invite_uid //额外参数
			  },
			  response:{
			  	statusName: 'status', //数据状态的字段名称,默认:code
					statusCode: 1,//成功的状态码,默认:0
					msgName: 'msg' ,//状态信息的字段名称,默认:msg
					countName: 'count', //数据总数的字段名称,默认:count
					dataName: 'data' //数据列表的字段名称,默认:data
			  },
			  cols: [[ //表头
			   {type:'numbers',title: '序号', fixed: 'left'},
			   {field: 'u_id', title: '会员id',width:80, fixed: 'left'},
			   {field: 'u_nickname', title: '会员昵称',width:150},
			   {field: 'proxy_level', title: '代理级别',width:100},
			   {field: 'u_goldcnt', title: '拥有金币',width:150},
			   {field: 'today_ubk_balance', title: '今日总输赢',width:150},
			   {field: 'today_tb_balance', title: '今日返还金额',width:150},
			   {field: 'sum_ubk_balance', title: '历史总输赢',width:150},
			   {field: 'sum_tb_balance', title: '历史返还金额',width:150}
			  ]],
			  limit: 10,
			  limits: [10, 20, 30, 40, 50] ,
			  page:{
			  	groups: 5 //只显示 5 个连续页码
			  },
			  done:function (res) {  //返回数据执行回调函数
			  	layer.close(index);  //返回数据关闭loading
			  	
			  }
    });
});
 
</script>

以上这篇layui加载数据显示loading加载完成loading消失的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
详解Document.Cookie
Dec 25 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
ES10的13个新特性示例(小结)
Sep 23 #Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 #Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 #Javascript
JS随机密码生成算法
Sep 23 #Javascript
详解mpvue开发微信小程序基础知识
Sep 23 #Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
layui树形菜单动态遍历的例子
Sep 23 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
PyQt5实现简易计算器
2020/05/30 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python yield和Generator函数用法详解
2020/02/10 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
幼儿教师考核制度
2014/01/25 职场文书
公司宣传语大全
2015/07/13 职场文书
新学期开学寄语2016
2015/12/04 职场文书
大学军训口号大全
2015/12/24 职场文书
教学反思怎么写
2016/02/24 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers