Processing message is not displaying
Processing message is not displaying
nrrao
Posts: 1Questions: 1Answers: 0
var datatableInstance;
function DataTable(TableID, Config, userRole) {
var selectid;
var spanid;
var ddtext;
if (Config == "1") {
datatableInstance = $('#' + TableID).DataTable(
{
"pageLength": 50,
"paging": true,
"ordering": false,
"info": true,
"searchable": true,
"filter": true,
"scrollCollapse": true,
"orderCellsTop": true,
"fixedHeader": true,
"fnInitComplete": function() {
// Enable THEAD scroll bars
$('.dataTables_scrollHead').css('overflow', 'auto');
// Sync THEAD scrolling with TBODY
$('.dataTables_scrollHead').on('scroll', function() {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
"createdRow": function(row, data, index) {
$('.savebutton').prop('disabled', true);
},
//fixedColumns: {
//leftColumns: 4
//},
"scrollX": true,
"dom": 'Bfrtip',
"oLanguage": { "sSearch": "Search all columns:", "sEmptyTable": "There is no data." },
"buttons": [{
"extend": 'csv',
"filename": 'G ' + d.toDateString(),
"title": '',
exportOptions: {
columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
}
},
/*{
"extend": 'pdf',
"filename": 'G ' + d.toDateString(),
"title": '',
exportOptions: {
columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
}
},
{
"extend": 'print',
"filename": 'GR ' + d.toDateString(),
"title": '',
exportOptions: {
columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
}
},*/
{
"extend": 'copy',
"filename": ' Report ' + d.toDateString(),
"title": '',
exportOptions: {
columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
}
},
{
"extend": 'excel',
"filename": 'Report ' + d.toDateString(),
"title": '',
exportOptions: {
columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
}
}],
"processing": true, // Enable processing message
"language": {
"processing": "<div id='processingMessage'>Processing...</div>" // Custom processing message
},
"columnDefs": [{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
targets: 0
},
{ "name": "action", targets: 01, visible: false },
{ "name": "fName", targets: 02, visible: false },
{ targets: 03, visible: false },
{ targets: 06, visible: false },
{ targets: 08, visible: false },
{ targets: 09, visible: false },
{ targets: 10, visible: false },
{ targets: 11, visible: false },
{ targets: 12, visible: false },
{ targets: 14, visible: false },
{ targets: 15, visible: false },
{ targets: 16, visible: false },
{ targets: 17, visible: false },
{ targets: 18, visible: false },
{ targets: 20, visible: false },
{ targets: 22, visible: false },
{ targets: 23, visible: false },
{ targets: 24, visible: false },
{ targets: 25, visible: false },
{ targets: 26, visible: false },
{ targets: 27, visible: false },
{ targets: 28, visible: false },
{ targets: 29, visible: false },
{ targets: 30, visible: false },
{ targets: 31, visible: false },
{ targets: 32, visible: false },
{ targets: 33, visible: false },
{ targets: 34, visible: false },
{ targets: 35, visible: false },
{ targets: 36, visible: false },
{ targets: 37, visible: false },
{ targets: 38, visible: false },
{ targets: 39, visible: false },
{ targets: 40, visible: false },
{ targets: 41, visible: false },
{ targets: 42, visible: false },
{ targets: 43, visible: false },
{ targets: 44, visible: false },
{ targets: 45, visible: false },
{ targets: 46, visible: false },
{ targets: 47, visible: false }
]
});
console.log("Alert1");
$('.dataTables_wrapper').css('overflow-x', 'scroll');
$('.savebutton').prop('disabled', true);
/* Formatting function for row details - modify as you need */
function format(d) {
var tb = $('<table cellpadding="5" class="" cellspacing="0" border="0" width="50%" style="padding-left:250px;"/>')
.addClass('loading')
.text('Loading...');
console.log(d[6]);
console.log(d[46]);
console.log(d[25]);
$.ajax({
url: getDashBoardData,
data: {
tuid: d[6],
user: d[46],
//gradTerm:d[25]
},
dataType: 'json',
success: function(json) {
console.log(json);
//let dashData = JSON.parse(json);
console.log(json[0].CAMP_CODE);
tb
.html('<table>' +
'<tr>' +
'<td>PA:</td>' +
'<td>' + json[0].C + '</td>' +
'<td>Hours Earned:</td>' +
'<td>' + json[0].HO + '</td>' +
'</tr>' +
'<tr>' +
'<td>Sel:</td>' +
'<td>' + json[0].SL + '</td>' +
'<td>tion:</td>' +
'<td>' + json[0].CA + '</td>' +
'</tr>' +
'<tr>' +
'<td>Grad APP:</td>' +
'<td>' + json[0].APP + '</td>' +
'<td>Run Time:</td>' +
'<td>' + json[0].RUNTIME + '</td>' +
'</tr>' +
'<tr>' +
'<td>Current Term:</td>' +
'<td>' + json[0].TERM + '</td>' +
'<td> Crns:</td>' +
'<td>' + json[0].CRNS + '</td>' +
'</tr>' +
'<tr>' +
'<td>Gr Crns:</td>' +
'<td>' + json[0].GR_CRNS + '</td>' +
'<td>Pending:</td>' +
'<td>' + json[0].PENDING + '</td>' +
'</tr>' +
'<tr>' +
'<td>Future Courses:</td>' +
'<td>' + '-' + '</td>' +
'<td>Current Term Courses:</td>' +
'<td>' + json[0].CURRENT_TERM + '</td>' +
'</tr>' +
'<tr>' +
'<td>Less Than C Minus:</td>' +
'<td>' + json[0].LESS_THAN_C_MINUS + '</td>' +
'<td>Curr Reg Cr Hrs:</td>' +
'<td>' + json[0].CURRENT_REG_CRHRS + '</td>' +
'</tr>' +
'<tr>' +
'<td>MG Reported:</td>' +
'<td>' + json[0].MG_REPORTED + '</td>' +
'<td>Incomplete Reported:</td>' +
'<td>' + json[0].INCOMPL_REPORTED + '</td>' +
'</tr>' +
'<tr>' +
'<td>Expected Earned Cr Hrs:</td>' +
'<td>' + json[0].EXPECTED_EARNED_CRHRS + '</td>' +
'<td>Earned Plus Expected Earned Hrs:</td>' +
'<td>' + json[0].EARNED_PLUS_EXPECTED_EARNED_HRS + '</td>' +
'</tr>' +
'<tr>' +
'<td>Dars Link:</td>' +
'<td>' + json[0].CAMP_CODE + '</td>' +
'<td>Other Curriculum:</td>' +
'<td>' + d[46] + '</td>' +
'</tr>' +
'</table>')
.removeClass('loading');
}
});
return tb;
}
// Add event listener for opening and closing details
$('.DataTable_Table tbody').on('click', 'td.details-control', function() {
var table = $('#tbl_grad_students').DataTable();
var tr = $(this).closest('tr');
var row = datatableInstance.row(tr);
console.log("row" + row);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
var hidadvisor = "#hid_adv_" + row.data()[42];
//insertTrackingAppSection(row.data()[42], "Child Record Viewed.",$(hidadvisor).val());
}
});
$('#tbl_grad_students tbody').on('click', 'td.button-control', function() {
console.log("Save button");
var tr = $(this).closest('tr');
var row = datatableInstance.row(tr);
});
}
}
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
It's because
processingonly applies when server-side queries are made, please see this comment in the docs:Allan explains in this thread (though note search applies also to load):
You could add your own message/indicator before initialising the table, then removing it in
initComplete,Colin