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

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

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

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

下面是我的代码。

代码语言:javascript
运行
复制
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-12 06:14:10

使用bProcessing: true

official documentation

bProcessing

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

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

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

https://stackoverflow.com/questions/42695621

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档