How to detect when cascaded SearchPanes have finished updating

robsimpson

This was kind of asked in https://datatables.net/forums/discussion/66629/searchpanes-loading-event-on-filter but i found no answer to this specific question.

A click on a search pane seems to generate over 2 * N draw events, for N search panes.

I would like to show a loader gif while these happen (sometimes taking several seconds), but don't know how to determine when the Search Panes are completely refreshed.

I added searchPanes: {cascadePanes:true}, to the previous example: http://live.datatables.net/wejepeti/17/edit

You can see that draw is triggered many times.

How can I tell when the final one is done, so I can hide the loading element?

Thanks

colin

There's no tidy way of doing it, unfortunately, but in the draw you could possibly make a note of the time and issue a setTimeout, and when that completes (maybe after 100ms or some other duration of your choosing), if that value hasn't been updated, assume the draws have stopped. You would get a small lag, but I can't think of any other way of doing it I'm afraid.

Colin

robsimpson

Thanks, Colin, for your quick response, it's given me some interesting results...

It seems that within the table.on('draw') function, setTimeout functions (and setInterval functions) don't get called until the table is finished. Perhaps they are somehow queued behind the table process? You can see this in http://live.datatables.net/wejepeti/21/edit, but it is more obvious for a very large table (100k rows) when the delay is significant.

So that means that if you call a setTimeout function (once, on the first trigger), then when it is executed your table is ready - so I can update my charts then, and they will only be updated once per table refresh. Which is a good thing, and seems to solve my problem.

But as I have about an eight second delay in table updates, I wanted to show a loading gif, and hide it when complete. But the jQuery $(.loading).show() is also 'queued' and only gets executed at the end of the process.

So I can defer chart updates, which is good, but not load a 'loading' gif.

Thanks again,

Rob

allan

Hi Rob,

SearchPanes "processing" state should really interact with DataTable's built in processing option to show that things are happening. Is that not working for you on larger data sets?

Normally what you have to do to display a loading icon is to first show the loader and then perform the processing action in a setTimeout. That allows a "pause" in execution which the browser will use to paint the updated view.

I'm not sure that there is a particularly good way to do this though.

You can see that draw is triggered many times.

I really don't like that. I think that is an error in SearchPanes. I've added a bug for me to look into why that is happening.

Allan

robsimpson

Hi Allan,

SearchPanes "processing" state should really interact with DataTable's built in processing option to show that things are happening. Is that not working for you on larger data sets?

I'm client-side currently so although the element is there, it is not showing anything (as expected).

Normally what you have to do to display a loading icon is to first show the loader and then perform the processing action in a setTimeout.

The draw() is triggered from Datatables. How can I intervene and inject my show command before this runs?

I really don't like that. I think that is an error in SearchPanes.

Thanks a lot for your efforts, much appreciated!

Rob

allan

Hi Rob,

You could listen for the processing event. That will tell you when to show / hide your custom processing indicator.

Allan

robsimpson

Thank you!