首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在jquery的datatable插件中单击分页时添加加载页面

如何在jquery的datatable插件中单击分页时添加加载页面
EN

Stack Overflow用户
提问于 2017-03-09 12:38:46
回答 1查看 74关注 0票数 0

我想添加一个简单的加载效果之前,分页链接被点击,并关闭加载页面后,表被重新绘制。我试了几种方法,但效果不是很好。我甚至尝试过jQuery.bind-first插件。没有效果。请帮帮忙。提前谢谢。

下面是我的代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var idCredit = (parseInt($.getUrlVar('idCredit'))).toString();
            $("#idCredit").val(idCredit);
            var oTable =  $('#companyInfoConnectionGrid').dataTable({
        "bProcessing": false,   
        "sScrollX":"100%",
        "bJQueryUI": true,
        "bFilter": false,
        "bInfo": false,
        //"sScrollY": 420,
        "bSort": true,
        "bDestroy":true,
        "iDisplayLength":10,
        //"aaSorting": [[ 2, "desc" ]],
        "sScrollXInner": "100%",
        "sPaginationType": "full_numbers",
        "sAjaxSource":"queryCompanyInfoCreditAssociation",
        "bSort": false,   
        "bServerSide":true,
        "bLengthChange":false, 
        "fnServerData":retrieveData,
        "fnDrawCallback": function( settings ) {
                        window.top.Comm.stopPageLoading();
            },
        //"sColumns":["id","productCode","name",connectionType,grantQuota,approvalAmount,status,result,reason,edate],
        "aoColumns": [
            { "mDataProp": "id",
                render:function(data,type,row,meta) {
                    var workflow = row.workflow=="" ? 0 : row.workflow;
                    var a = '<a href="javascript:this.parent.parent.queryAuditNavigate('+data+',' + workflow + ')">'+data+'</a>'
                    return a;
                }
            },
            { "mDataProp": "productCode",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "name",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "companyName",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "connectionType",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "grantQuota",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                }
            },
            { "mDataProp": "approvalAmount",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                }
            },
            { "mDataProp": "status"
            },
            { "mDataProp": "result",
                    render:function(data,type,row,meta) {
                        if(""===data || null === data){
                            return "-"
                        }
                        return data;
                    }
            },
            { "mDataProp": "reason",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                }
            },
            { "mDataProp": "edate",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "overdueSign",
                render:function(data,type,row,meta) {
                    if(""===data || null === data){
                        return "-"
                    }
                    return data;
                } },
            { "mDataProp": "detail"
            }
        ]
        }
});

$("#companyInfoConnectionGrid_paginate").onFirst("click", "a", function() {
        debugger;
         window.top.Comm.startPageLoading();
 });
EN

回答 1

Stack Overflow用户

发布于 2017-03-11 22:14:10

使用bProcessing: true

official documentation

bProcessing

在处理表格(如排序)时,启用或禁用‘正在处理’指示符的显示。这对于包含大量数据的表特别有用,在这些表中,对条目进行排序可能需要很长的时间。

如果要更改默认消息,请使用oLanguage.sProcessing选项:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"oLanguage": {
  "sProcessing": "DataTables is currently busy"
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42695621

复制
相关文章
JQuery表格插件DataTable的使用
DataTable是基于JQuery的表格插件,提供了丰富的功能。下面简要说明其用法。
卡尔曼和玻尔兹曼谁曼
2019/01/25
4.7K0
JQuery表格插件DataTable的使用
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页。https://www.jianshu.com/p/a1b8b1db025b 但是这样写的缺点就是一次性加载数据进行分页的,后期数据多的话可能不行,数据量太大比如说上千条数据,在给每个页面分配固定的条数,一下子加载不出来,就会导致页面间的短暂空白,如果遇上网速不好,那差不多就是一个不完美的bug 一次性加载数据,前端分页 上一篇文章中提到的原理js代码如下: $(functi
王小婷
2018/06/01
4K0
jQuery实现单击页面产生随机字符效果
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
浩Coding
2019/07/02
2.7K0
jQuery实现单击页面产生随机字符效果
vue分页轮播_jquery分页插件
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/14
5.5K0
给Emlog添加页面加载(加载中)特效
为了加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天我教大家把这一特效添加到Emlog主题中。要实现该特效同样要用到jquery,如果大家和我目前用的主题一样,为了实现其它特效已提前加载了jquery,那么正好充分利用jquery的强大功能,添加此特效何乐而不为呢?当然仅仅为了实现这个特效,而去加载50几K的jquery就有点得不偿失了。
用户8099761
2023/05/10
1K0
jquery dataTable 的学习之初始化插件(一)
最近用到了一个比较实用的jquery插件--jquery dataTable,这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
OECOM
2020/07/02
1.1K0
Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分
王小婷
2018/06/01
4.4K0
基于RequireJS和JQuery的模块化编程——常见问题解析
由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs。毕竟官方文档比较专业嘛... 不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法。 关于AMD和CMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块定义)的典型是淘宝的seajs。 他
用户1154259
2018/01/17
3K0
基于RequireJS和JQuery的模块化编程——常见问题解析
自实现jQuery版分页插件
本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固定放置在上一页按钮的后面和下一页按钮的前面。另外在DOM操作上,用的是jQuery,当然如果不想使用jQuery的话,也可以很容易的改成原生js。下面直接贴出代码。 1、paging.js var tableStyle = ".page {font-size: 14px;background-color
用户1174387
2018/05/28
2.2K0
【初学者指南】在ASP.NET MVC 5中创建GridView
介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样。服务器端和客户端有许多可用的第三方库,这些库能够提供所有必需的功能,如 Web 表格中的搜索、排序和分页等。是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务器端提供搜索或其它功能的需求等。 可用的库 以下是一些可用的库和插件: Grid.Mvc MVCGrid.NET PagedList.MVC JQuery.Grid JQuery Grid
葡萄城控件
2018/01/10
6.3K0
【初学者指南】在ASP.NET MVC 5中创建GridView
jquery分页插件pagination.js的使用
获取当前页面的页码getCurrent()、获取总页数getPageCount()等方法,必须在回调函数中调用执行!
Rattenking
2021/01/29
5.7K0
jquery分页插件pagination.js的使用
jQuery 双击事件(dblclick)时,不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。 先看一下点击事件的执行顺序:
飞奔去旅行
2019/06/13
5.4K0
Jquery DataTable 的学习之基础配置(二)
本文将介绍jquery DataTable的一些基础配置,如分页、排序、过滤等,代码如下
OECOM
2020/07/01
1.2K0
在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
背景 在前一篇文章《【初学者指南】在ASP.NET MVC 5中创建GridView》中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web 表单的功能
葡萄城控件
2018/01/10
5.5K0
在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
延迟加载图片的jQuery插件-Lazy Load Plugin for JQuery
Lazy Load是一个用Javascript写得jQuery插件。它可以使一个长网页中,不在当前视图中的图片延迟加载,以提高页面的载入速度。
EltonZheng
2021/01/26
3.8K0
页面加载中jquery逐渐消失效果实现
为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。 html: <div id="loading"><img src="images/common/loading.gif" alt=""></div> css: /*加载中*/ #loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; backgroun
蓓蕾心晴
2018/04/12
2.4K0
MyVBA加载宏——添加自定义菜单02——给按钮添加单击事件
在2003版本之前的Excel里使用过VBA的话,应该接触过在Excel里添加自定义菜单,使用方法和前面说的在VBE里添加菜单是类似的。
xyj
2020/07/28
2.8K0
MyVBA加载宏——添加自定义菜单02——给按钮添加单击事件
jquery插件treetable 动态加载问题
在增加或修改后,动态加载html,开始就直接使用 $(“#treeTable tbody”).empty().append(data); 这个用法是错误的,
全栈程序员站长
2022/09/01
2.7K0
点击加载更多

相似问题

如何在jquery的datatable插件中设置单击分页时的事件

14

jQuery分页插件单击转到页面

116

单击jquery datatable分页按钮

12

如何在页面加载时加载jquery插件

13

如何在jquery datatable分页之间添加文本

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文