Handle loading events from Datatable ?

MrKementari

Hello there,

I think I misunderstand how to handle events from Datatables.

I try to load a table with a large amount of data (around 35 000 lines from a database). It works fine but it takes a long time to load, about ten / fifteen seconds. During this time, I would like to display a "Loading ..." message or whatever and remove it once all the data has been loaded, but I can't manage it yet.

I have tried many things, here is the last code I have used, I don't understand well what I'm doing wrong ?

$(document).ready(function() {
   $('#dataTableMainCourante').DataTable();
});

$('#dataTableMainCourante').on('processing', function() {
   alert("Loading ...");
});

$('#dataTableMainCourante').on('init', function() {
   alert("Loading complete !");
});

Thanks for your help !

kthorngren

Try something like this to make sure the events are created before Datatables starts initializing:

$(document).ready(function() {
   $('#dataTableMainCourante')
      .on('processing', function() {
         alert("Loading ...");
      })
      .on('init', function() {
         alert("Loading complete !");
      })
      .DataTable();
});

You may want to use something like BlockUI instead of alert messages. I believe alert messages will block the page until the user clears the alert.

Kevin

MrKementari

Hi kthorngren,

yes of course alerts are here just for testing purposes.

I just tried your snippet but nothing happens, no error in dev console but no alert is displayed.

allan

If added with $().on() (as is the case in that snippet), you nee to add the .dt namespace:

$(document).ready(function() {
   $('#example')
      .on('processing.dt', function() {
         console.log("Loading ...");
      })
      .on('init.dt', function() {
         console.log("Loading complete !");
      })
      .DataTable();
});

Example.

That is not required if you use the DataTables on() method.

Allan

kthorngren

Sorry, yes you will need to add the .dt namespace. Read more about it in the event docs.

See the example in the processing docs. There is a flag that indicates if processing ocurring or not. Use that to display or remove the message.

If the processing event doesn't work as you want you may want to pair the preInit and init events to display/clear the message.

Kevin

MrKementari

That was the missing pieces, thanks to both of you !

kthorngren

Note that Allan's example shows that the processing event fires more than once. It will fire any time the table is sorted, searched, etc.. The init will turn the message off only once.

Kevin