0
我有下面的脚本来创建一个数据表和一个“另一个DataTables列过滤器”。一切运作良好，除非我有大量的数据，目前我正试图隐藏表，直到全部加载。以前，我在表格中使用style =“display：none”来隐藏加载并在下面的脚本中使用“.show（）”来加载后取消隐藏表格。出于某种原因，我无法通过脚本了解它为何失败。如何在加载时隐藏/显示数据表
<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>