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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Vue.js用法详解
2017/11/13 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
积极分子思想汇报
2014/01/04 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
保密工作整改报告
2014/11/06 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
2016年感恩节寄语
2015/12/07 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android