Processing Indicator and SearchBuilder with Buttons

Processing Indicator and SearchBuilder with Buttons

trongarttrongart Posts: 222Questions: 51Answers: 0
edited September 2021 in SearchBuilder

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    @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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    When I use this.processing() exactly as in your example, it does not show the loading icon.

    As it's a plugin, you need to include the plugin file too - in my example there's this line to do that,

        <script src="https://cdn.datatables.net/plug-ins/1.11.0/api/processing().js"></script>
    

    When I use this.processing(true) without this.processing(false), then the loading icon shows, but does not stop.

    Yep, you need to do the stop to make it stop! :)

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited September 2021

    @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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Use table.processing(true); instead of this.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 the Processing... element.

    Kevin

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    @kthorngren In the test case, the Processing indicator shows up now, but stays there and does not disappear.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I left the this.processing(false); at the end of the functions so you can see the Processing... element.

    So you need to change this to table.processing(false); .

    Kevin

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Can you update your test case with Kevin's suggestions, please, so we can see the current state of play,

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    @Colin Sure here it is: live.datatables.net/dafatode/1/edit
    Thank you for looking into this!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    The reason I left this.processing(false); in my example is to show the Processing ... 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

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    @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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2021

    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.

    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

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    @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.

Sign In or Register to comment.