如何在加载时隐藏/显示数据表

时间：2015-10-15 10:41:03

标签： javascript datatable load yadcf

我有以下脚本创建数据表和另一个DataTables列过滤器＆＃34;。一切都运行良好，除了我有大量的数据，目前我试图隐藏表，直到所有加载。以前我用过style =＆＃34; display：none＆＃34;在表中隐藏负载和＆＃34; .show（）＆＃34;在下面的脚本中加载后取消隐藏表。出于某种原因，我无法通过脚本来了解它失败的原因。

<script>
$(document).ready(function () {
oTable = $('#example').dataTable({
    "sScrollY": "300px",
    "iDisplayLength": 50,
    "bJQueryUI": true,
    "bStateSave": true,
            "oLanguage": {
        "sProcessing": "DataTables is currently busy"
    },
"fnFooterCallback": function ( nRow, aData, iStart, iEnd, aiDisplay ) {
//loop set dynamic variables
for( var i = 0; i < 20; i++){
window["Total" + i] = 0;
};

var array1 = $('#example').dataTable()._('td:nth-child(6)',  
{"filter":    "applied"});
var array2 = $('#example').dataTable()._('td:nth-child(7)', {"filter":  
"applied"});
var array3 = $('#example').dataTable()._('td:nth-child(8)', {"filter": 
"applied"});
var array4 = $('#example').dataTable()._('td:nth-child(9)', {"filter": 
 "applied"});
var array5 = $('#example').dataTable()._('td:nth-child(19)', {"filter": 
"applied"});
var array6 = $('#example').dataTable()._('td:nth-child(20)', {"filter": 
 "applied"});
var array7 = $('#example').dataTable()._('td:nth-child(21)', {"filter": 
"applied"});
var array8 = $('#example').dataTable()._('td:nth-child(27)', {"filter": 
 "applied"});
var array9 = $('#example').dataTable()._('td:nth-child(28)', {"filter": 
 "applied"});
var array10 = $('#example').dataTable()._('td:nth-child(29)', {"filter": 
 "applied"});
 var array11 = $('#example').dataTable()._('td:nth-child(30)',  
 {"filter": 
 "applied"});
var array12 = $('#example').dataTable()._('td:nth-child(31)', {"filter": 
"applied"});
var array13 = $('#example').dataTable()._('td:nth-child(32)', {"filter": 
 "applied"});
var array14 = $('#example').dataTable()._('td:nth-child(33)', {"filter": 
"applied"});
var array15 = $('#example').dataTable()._('td:nth-child(34)', {"filter": 
"applied"});
var array16 = $('#example').dataTable()._('td:nth-child(35)', {"filter": 
 "applied"});
var array17 = $('#example').dataTable()._('td:nth-child(36)', {"filter": 
 "applied"});
var array18 = $('#example').dataTable()._('td:nth-child(37)', {"filter": 
"applied"});
var array19 = $('#example').dataTable()._('td:nth-child(38)', {"filter": 
 "applied"});


 $.each(array1,function() {
Total1 += parseFloat(this, 10);
 });

 $.each(array2,function() {
Total2 += parseFloat(this, 10);
 });

$.each(array3,function() {
Total3 += parseFloat(this, 10);
});

$.each(array4,function() {
Total4 += parseFloat(this, 10);
});

$.each(array5,function() {
Total5 += parseFloat(this, 10);
});

$.each(array6,function() {
Total6 += parseFloat(this, 10);
});

$.each(array7,function() {
Total7 += parseFloat(this, 10);
});

$.each(array8,function() {
Total8 += parseFloat(this, 10);
});
$.each(array9,function() {
Total9 += parseFloat(this, 10);
});
 $.each(array10,function() {
Total10 += parseInt(this, 10);
});
$.each(array11,function() {
Total11 += parseInt(this, 10);
});
$.each(array12,function() {
Total12 += parseInt(this, 10);
});
 $.each(array13,function() {
Total13 += parseInt(this, 10);
});
 $.each(array14,function() {
Total14 += parseInt(this, 10);
});
$.each(array15,function() {
Total15 += parseInt(this, 10);
});
$.each(array16,function() {
Total16 += parseInt(this, 10);
});
$.each(array17,function() {
Total17 += parseInt(this, 10);
});
$.each(array18,function() {
Total18 += parseInt(this, 10);
});
$.each(array19,function() {
Total19 += parseInt(this, 10);
});

  var nCells = nRow.getElementsByTagName('th');
nCells[5].innerHTML = Total1.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,   
"$1,").toString();
nCells[6].innerHTML = Total2.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[7].innerHTML = Total3.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[8].innerHTML = Total4.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();

nCells[18].innerHTML = Total5.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[19].innerHTML = Total6.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
 "$1,").toString();
nCells[20].innerHTML = Total7.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();

nCells[26].innerHTML = Total8.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[27].innerHTML = Total9.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[28].innerHTML = Total10.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[29].innerHTML = Total11.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[30].innerHTML = Total12.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();

nCells[31].innerHTML = Total13.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[32].innerHTML = Total14.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[33].innerHTML = Total15.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[34].innerHTML = Total16.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();

nCells[35].innerHTML = Total17.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, 
"$1,").toString();
nCells[36].innerHTML = Total18.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
nCells[37].innerHTML = Total19.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();

  }

}).yadcf([{
    column_number: 0,
    column_data_type: "html",
    filter_type: "auto_complete",
    text_data_delimiter: ","
}, {
    column_number: 1,
    filter_type: "auto_complete",
    text_data_delimiter: ","
},  {
    column_number: 2,

    filter_default_label: "Priority"
}, {
    column_number: 3,

    filter_default_label: "Month"
}, {
    column_number: 4,

    filter_default_label: "Year"
}, {
    column_number: 5,

    filter_default_label: "InServiceCapitalized"
}, {
    column_number: 6,

    filter_default_label: "InServiceExpensed"
}, {
    column_number: 7,

    filter_default_label: "CIPCapYtdSpent"
}, {
    column_number: 8,

    filter_default_label: "CIPExpenseYtd"
},{
    column_number: 9,

    filter_default_label: "Type"
}, {
    column_number: 10,

    filter_default_label: "Category 1"
}, {
    column_number: 11,

    filter_default_label: "Category 2"
}, {
    column_number: 12,

    filter_default_label: "RPDateApproved"
}, {
    column_number: 13,

    filter_default_label: "SubCategory"
}, {
    column_number: 14,

    filter_default_label: "BudgetYear"
}, {
    column_number: 15,

    filter_default_label: "CostCenter"
}, {
    column_number: 16,

    filter_default_label: "ProjectCP"
}, {
    column_number: 17,

    filter_default_label: "Team"
}, {
    column_number: 21,

    filter_default_label: "StartingDate"
}, {
    column_number: 22,

    filter_default_label: "CompletionDate"
}, {
    column_number: 23,

    filter_default_label: "AssetLife"
}, {
    column_number: 24,

    filter_default_label: "ProjectManager"
}, {
    column_number: 25,

    filter_default_label: "Facility"
}
 ]); //In previous apps I showed the table here using "show()"

 });


</script>

1 个答案:

答案 0 :(得分：0)

找到解决方案：

将表变量更改为：

                    "bLengthChange": true,
                "bFilter": true,
                "bJQueryUI": true,  
                "iDisplayLength": 25,
                "stateSave": true,
                "iCookieDuration": 2592000, // 30 days
  "bSort":false,
  "bPaginate":true,
  "sPaginationType":"full_numbers",
相关问题
最新问题