Question

我想在点击分页链接之前添加一个简单的加载效果，并在重绘表格后关闭加载页面。我尝试了几种方法来做到这一点，但结果并不是很好。我甚至尝试过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();
 });

Answer 1

使用bProcessing: true。

来自official documentation：

bProcessing

启用或停用＆＃39;处理＆＃39;表格处理时的指示符（例如排序）。这对于具有大量数据的表特别有用，因为它可能需要相当长的时间来对条目进行排序。

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

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

当我点击jquery中的datatable插件中的分页时，如何添加加载页面

1 个答案: