Processing Indicator and SearchBuilder with Buttons
Processing Indicator and SearchBuilder with Buttons
trongart
Posts: 222Questions: 51Answers: 0
Is there an option to show the processing indicator when a button is clicked that filters the SearchBuilder as in this case: live.datatables.net/kofiruti/1/edit
Although everything loads quickly in the test cases, when using several thousands rows of data, it can take 5-10 seconds for the SearchBuilder to show results.
This question has an accepted answers - jump to answer
Answers
This might work - http://live.datatables.net/kofiruti/2/edit
See the
button().processing()calls inside "filter 1" - that should show the button as being in a processing state.You could also do the same perhaps with the processing plugin - see my example in this thread,
Colin
@colin Thank you for your feedback! When I use this.processing() exactly as in your example, it does not show the loading icon. When I use this.processing(true) without this.processing(false), then the loading icon shows, but does not stop.
As it's a plugin, you need to include the plugin file too - in my example there's this line to do that,
Yep, you need to do the stop to make it stop!
Colin
@colin Appreciate your help! I included the plugin line in your example and the loading icon still does not show. You can check it when you add Filter 1 or 2 5-10 times so it gets slowlier.
live.datatables.net/huleyoze/1/edit
Use
table.processing(true);instead ofthis.processing(true);. For example:http://live.datatables.net/huleyoze/2/edit
I left the
this.processing(false);at the end of the functions so you can see theProcessing...element.Kevin
@kthorngren In the test case, the Processing indicator shows up now, but stays there and does not disappear.
So you need to change this to
table.processing(false);.Kevin
Yes I did this - the Processing indicator does not show then. You can see it when you click multiple times on Filter 1 or 2 so it takes more than a couple seconds to load.
Can you update your test case with Kevin's suggestions, please, so we can see the current state of play,
Colin
@Colin Sure here it is: live.datatables.net/dafatode/1/edit
Thank you for looking into this!
The reason I left
this.processing(false);in my example is to show theProcessing ...element appears. Otherwise in the test case the function runs fast enough that the element isn't displayed long enough to actually see. I added a setTimeout() function with a 3 second delay so you can see the processing plugin is working:http://live.datatables.net/dafatode/3/edit
Kevin
@kthorngren Appreciate your help! I think the issue is that the processing indicator shows up only AFTER the criteria are rebuilt and not during the process. You can verify this by clicking 7 times on the Filter 1 button as SearchBuilder slows down then. The processing indicator only shows for 3 seconds once the results are displayed and not during the loading/rebuilding stage.
I made another update. I moved everything into the settimeout function except the `table.processing(true); statement. You can see the processing element shows before any of the other statements are executed.
http://live.datatables.net/dafatode/7/edit
I took the same previous example and made the timeout 500 ms. You can barely see the flash of the processing element. As I said before the function runs fast enough that you don't see the processing element.
Kevin
Are you referring to your example or mine?
In mine Processing shows on the first click. Does it not show on the first click for you?
Just to show that the processing plugin is working properly I added a timer to track how long it takes for the function to run and set the timeout 500 ms. When I click Filter 1 it takes around 100 ms. The processing element briefly shows. There is probably a fade in time.
If you want something that shows up faster try blockUI or other third party tool. I updated the example to use blockUI with a timeout of only 50ms. You can see a quick blip:
http://live.datatables.net/xeforena/1/edit
Kevin
@kthorngren Thank you so much for looking into this! Moving everything into the set timeout function and setting it to 0 seconds delay, makes the processing indicator show correctly for me.