Ajax DataTable to show a "Loading" Indicator on pre-/post-Render. drawCallback() is called twice
Ajax DataTable to show a "Loading" Indicator on pre-/post-Render. drawCallback() is called twice
For an Ajax DataTable, I need to show a "Loading..." overlay on Pre-Render and hide it on Post-Render.
Sounds simple and the following solution works,
// Show Loading Overlay on pre-render (drawCallback gets called twice both before and after render, strangely)
"drawCallback" : function(settings) {
$('#loadingProgressOverlay').show();
},
// Hide Loading Overlay on post-render (initComplete gets called only once at the very end)
"initComplete": function(settings, json) {
$('#loadingProgressOverlay').hide();
},
But just as the following user found, drawCallback gets called twice both before & after the render . So this solution isn't clean. How can I isolate just the pre-render moment?
https://datatables.net/forums/discussion/8852/run-a-function-after-ajax-request-finished
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Use the
preXhrevent. This way your loading message starts before the Ajax request.Kevin
Hi, the
preXhrevent never gets called in my code.drawCallbackdoes get called butpreXhrdoes not. I verified it as follows. I see thedrawCallbackalert but not thepreXhrone.ITs an event not an initialization option. Use the syntax in the docs and place it before the Datatables init code. Like this:
Kevin