Ability to create an overlay over entire table while ajax processing is in progress.
Ability to create an overlay over entire table while ajax processing is in progress.
stevecookms
Posts: 3Questions: 1Answers: 0
I am currently using this to load a processing message while the table is fetching data. I want it to look like a modal popup does and just show the message, with a greyed out background over the entire datatable element.
function loadAsyncTable(tableId, url, columns, orderColumnIndex, ascDesc, initialPageLength) {
//$('#' + tableId).DataTable().destroy();
$('#' + tableId).DataTable({
"proccessing": true,
"serverSide": true,
"processing": true,
"ajax": {
"url": url,
"type": "post",
"global": false,
"dataSrc": "data"
},
"lengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
"pageLength": initialPageLength,
"language": {
"search": "Filter:",
"loadingRecords": "Please wait - loading...",
"processing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
},
"columns": columns,
"order": [[orderColumnIndex, ascDesc]]
});
}
This discussion has been closed.
Answers
This thread has some options. You can find others on the forum.
Kevin
Hmm I'm actually already doing both of those already.
I have the processing turned on, and I also have the global ajax overlay that goes over the entire screen.
I'm looking to just cover the datatable table element and not the entire screen
Looks like you can define the element that [Busy Load)(https://piccard21.github.io/busy-load/) applies to. You can use the
preXHRevent to show the loader andxhrto hide it. You can apply it to any element list thetabletag. Or if you want to overlay the Datatable elements like search and paging you can apply it to the wrapperdivwhich has the id ofexample_wrapperwhereexampleis the id of your table. See this example:http://live.datatables.net/lufuraji/1/edit
Kevin