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

项目中，向后台请求数据，经常会出现较长的等待时间，这时我们需要一个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消失的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于layui flow loading占位图的实现方法

    如果流图片要加载失败, 就会显示找不到图片的裂痕 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow&quo

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

    项目中,向后台请求数据,经常会出现较长的等待时间,这时我们需要一个loading转圈圈,接收到后台的数据时,让loading消失 这layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading <link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" /> <script type="text/javascr

  • vueJs实现DOM加载完之后自动下拉到底部的实例代码

    这篇文章给大家介绍vueJs实现DOM加载完成之后自动下拉到底部,文中给大家记录了整个问题的过程,对实现思路感兴趣的朋友大家阅读下本文. /.....................................更新..................................../ 这个问题是很早之前遇到的,后来想来,其实是个很简单的问题.在dom记载完成就自动下拉到底部,只需要使用Vue.nextTick(() => {})函数即可,因为vue是虚拟dom,不会实时更新dom,nec

  • layui(1.0.9)文件上传upload,前后端的实例代码

    因为公司还在使用老版本的layui,文件上传在新版本中全部重写了,这里记录下老版本layui的文件上传. 前端代码:(引入layui相关包) <input type="file" lay-type="file" id="xxxxx" name="file" class="layui-upload-file"> 这里可以参考layui官方文档,有一点需要注意,name属性是必需的,当你选择好文件后

  • java synchronized加载加锁-线程可重入详解及实例代码

    java synchronized加载加锁-线程可重入 实例代码: public class ReGetLock implements Runnable { @Override public void run() { get(); } public synchronized void get() { System.out.println(Thread.currentThread().getId()); set(); } public synchronized void set() { Syste

  • 漂亮实用的页面loading(加载)封装代码

    漂亮实用的页面loading(加载)封装代码

    要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,以备未来直接使用. html <!-- 缓冲提示条 --> <div class='buffer hidden' id='buffer' > <div class="spinner"> <span class='buffer_tip' id='buffer_tip' >正在登陆</span> <di

  • PHP实现简单ajax Loading加载功能示例

    本文实例讲述了PHP实现简单ajax Loading加载功能.分享给大家供大家参考,具体如下: var xmlHttp; function createXmlHttpReq() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function fu

  • 基于jquery的loading 加载提示效果实现代码

    基于jquery的loading 加载提示效果实现代码

    loading 加载提示 ······ 透明遮罩 居中    复制代码 代码如下: body{ margin: 0; font-size: 12px; line-height: 100%; font-family: Arial, sans-serif; } .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; posit

  • Android加载loading对话框的功能及实例代码(不退出沉浸式效果)

    一.自定义Dialog 在沉浸式效果下,当界面弹出对话框时,对话框将获取到焦点,这将导致界面退出沉浸式效果,那么是不是能通过屏蔽对话框获取焦点来达到不退出沉浸式的目的呢.说干就干,我们先来看一下改善后的效果图. 普通对话框弹出效果 LoadingDialog弹出效果 自定义LoadingDialog public class LoadingDialog extends Dialog { public LoadingDialog(Context context) { super(context);

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • vue 全局封装loading加载教程(全局监听)

    前言: 为了页面美观,请求接口的时候延迟没有数据,页面感觉狠卡顿,封装loading,请求接口成功后隐藏掉(我这是用的vant 组件根据自己情况进行改变). 第一步: 建立loading.vue <template> <div class="loading"> <van-loading size="36px" vertical>加载中...</van-loading> </div> </templat

随机推荐