Show loading indicator on client-side actions

LukasL

I'm working with a client-side Datatable that has 10 columns. When I show more than 1k entries, there is an understandable delay when paging, sorting, etc. I want to show 5k entries but the delay lasts around 2-3 seconds, which can throw off the user because it's not obvious that something is loading (the page just freezes).

Is there a way to run JS code before and after sorting, paging, or when another feature is executed? What I would do is run code to show a spinner to indicate something is happening. Although, because the page freezes, I may have trouble with that.

Or maybe there is a build in way to do this? The processing option does not work. Maybe it's only for server-side processes?

kthorngren

I've used jQuery BlockUI plugin and it seems to work well. I haven't used it with Datatables in this way but you might be able to invoke it in the preDraw event then unblock in the draw event. Let us know if this works for you.

Kevin

sungkhum

I had trouble finding a solution to have a loading spinner that worked for client side data (a plain HTML table - not AJAX) - but I was able to use some jQuery along with .on( ‘draw.dt’, function () { /* do whatever you want here */ } ) - you can find my code here: https://levelup.gitconnected.com/get-rid-of-that-datatables-loading-glitch-7af392bc3a6?source=friends_link&sk=7673a87557d6810199527bab60ebec61