layui数据表格分页加载动画,自己定义加载动画,"加载中..."

记录思路,仅供参考

在表格渲染完成后,在done回调函数中给分页动态加点击事件,

关闭"加载中..."动画也是在 done回调函数中关闭

这是我实现的思路,记录给大家参考.


  , done: function (res, curr, count) {
        // 添加分页加载动画的函数
        $(‘.layui-laypage > a‘).each(function(){
            $(this).attr(‘onclick‘,"pageLoading(this)");
        })
        top.layer.close(loadingIndex); // 渲染完成后关闭动画
    }

/**
 * 分页请求的loading动画
 * @param {当前点击的dom} that
 */
function pageLoading(that){
   var disa = $(that).hasClass(‘layui-disabled‘);
   if(disa){ // 如果是最后一页或者是只有一页,那就不可点击
       return false;
   }
   loadingIndex = pageCommon.layerLoad(true); // 打开加载中动画
}

原文地址:https://www.cnblogs.com/ybixian/p/9777928.html

时间: 2024-11-08 07:04:52

layui数据表格分页加载动画,自己定义加载动画,"加载中..."的相关文章

SPA项目开发之动态树+数据表格+分页

动态生成NavMenu导航菜单(只支持2级菜单)1 结构 : <el-menu key="" index=""> <el-submenu> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <templat

关于layui数据表格重载传值的问题

在工作的时候用到了layui的数据表格,需要实现一个重载功能,是搜索框模糊查询的功能,官方示例的文档(官方链接:https://www.layui.com/demo/table/reload.html) 上说的是 传值需要放到一个key:{}里,反复测试这样是不对的,应该去掉外层key:{},直接写where:{id:demoReload.val()},这样后台直接request.getparameter("id")就可以拿到值了. 不知道为什么贤心大神不更正一下这个地方的坑 原文地址

[Javascript] 动态隐藏和显示 Layui 数据表格的列

需求: 设置一个按钮,动态隐藏或展示数据表格的列.默认隐藏部分列,点击按钮进行显示,再次点击就隐藏. 基于 layui 的数据表格. 代码: 绑定按钮事件. 这里需要设置的列比较多,表格字段名格式:d1_roi.d1_ltv.d2_roi.d2_ltv... 原理:先清除每列的 layui-hide 的 class,然后给当前列每个格子加上固定宽度即可. 1 //拓展列切换 2 $(".js-showhide").click(function(){ 3 var roi_key = ''

Layui数据表格/搜索重加载/分条件操作/工具条监听

<div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> <div class="layui-row" style="margin-top: 20px;"> //搜索开始 <form class="layui-form" action="" onsubmit="

layui 数据表格使用

//第一个实例 table.render({ elem: '#demo' ,height: 400 ,url: '/My_NewsTest/LookServlet' //数据接口 ,page: true //开启分页 ,limit:5 ,limits:[3,6,10] ,page:true ,parseData: function(res){ //res 即为原始返回的数据 return { "code":0, //解析接口状态 "msg":""

layui数据表格固定头部和第一列、colspan合并列

刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好,在最后挣扎下,还是选择了用layui.最后加上从各大神的demo中得到的灵感.在这里记录一下,希望可以帮助到有需要的人啦~ 移动端展示效果如下: 1 <script> 2 3 layui.use('table', function(){ 4 var table = layui.table; 5 /

layui数据表格监听按钮问题

layui官网文档源码 原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn lay

datagrid 数据表格分页原理

请求数据: page 页码. rows 每页记录数响应数据: total 总记录数. rows 当前页数据记录 原文地址:https://blog.51cto.com/13587708/2424248

layui数据表格的td模板

1.常用操作模板 <script type="text/html" id="userbar"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="change">修改</a&g