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

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

下面是我的代码

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();
 });

varidcredit=（parseInt（$.getUrlVar（'idCredit'）））.toString（）；
美元（“#idCredit”）.val（idCredit）；
var oTable=$（“#公司聚焦连接网格”）.dataTable({
“b处理”：false
“sScrollX”：“100%”，
“bJQueryUI”：没错，
“bFilter”：错误，
“bInfo”：假，
//“sScrollY”：420，
“bSort”：正确，
是的，
“iDisplayLength”：10，
//“aaSorting”：[[2，“desc”]，
“sScrollXInner”：“100%”，
“sPaginationType”：“完整编号”，
“sAjaxSource”：“queryCompanyInfoCreditAssociation”，
“bSort”：错误
“bServerSide”：正确，
“bLengthChange”：false，
“fnServerData”：检索数据，
“fnDrawCallback”：函数（设置）{
window.top.Comm.stoppageload（）；
},
//“sColumns”：[“id”、“productCode”、“name”、连接类型、grantQuota、批准金额、状态、结果、原因、edate]，
“aoColumns”：[
{“mDataProp”：“id”，
呈现：函数（数据、类型、行、元）{
var workflow=row.workflow==“”？0:row.workflow；
变量a=''
返回a；
}
},
{“mDataProp”：“productCode”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“名称”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“公司名称”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“connectionType”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“grantQuota”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
}
},
{“mDataProp”：“approvalAmount”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
}
},
{“mDataProp”：“状态”
},
{“mDataProp”：“结果”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
}
},
{“mDataProp”：“原因”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
}
},
{“mDataProp”：“edate”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“过度设计”，
呈现：函数（数据、类型、行、元）{
如果（“===数据| | null===数据）{
返回“-”
}
返回数据；
} },
{“mDataProp”：“详细信息”
}
]
}
});
$（“#公司聚焦连接网格”_paginate”）。首先（“单击”、“a”，函数（）{
调试器；
window.top.Comm.startPageLoading（）；
});

使用

b处理：true

从：

b处理

在处理表格（例如分拣）时，启用或禁用“处理”指示器的显示。这对于包含大量数据的表尤其有用，因为在这些表中，对条目进行排序可能需要相当长的时间

如果要更改默认消息，请使用选项：

"oLanguage": {
  "sProcessing": "DataTables is currently busy"
}