Events fired multiple times on ajax reload and searchpanes

mdesmond

It seems as though many DataTables events are being fired too many times when certain actions are performed. Specifically, when using SearchPanes or the ajax.reload() call, the search and draw events are being fired multiple times when it seems as though only one should be necessary, although maybe I am not understanding this properly. I noticed this because I have a lot of data that I need to process client-side and other more lengthy events that are hooked to the DataTables search and draw events that are causing a noticeable lag in the UI. Ideally when I call ajax.reload() (or perform one of the other actions that are firing multiple events) and the data is fully refreshed, I can refresh all other charts, etc. just once.

Here's a list of when this occurs specifically, hopefully I didn't miss any:
* ajax.reload() calls search three times, draw three times, and processing twice.
* Selecting a single SearchPane filter triggers just one search and draw event as expected, but the "Clear All" button triggers at least three search and draw events.
* Ordering data in the DataTable calls the search event?
* Initial load calls search twice and draw twice

Here's a link to a live test case: live.datatables.net/lohiline/4/edit?js,console,output
I have event listeners for all of the major events: draw, search, processing, xhr, init, deselect, select, stateLoaded.

Thank you for your help!

sandy

Hi @mdesmond ,

The search is called whenever there is a full draw taking place on the table. This is so that the searching that is applied to the table is consistent across all redraws of the table. The same goes for the order which requires a draw to redraw the table, in turn triggering a search for the same reasons as above.

This is the code for clearing the panes. It runs over all of the panes and deselects and filters that are in place within them. It then calls a further draw at the end to ensure that the table is the most up to date version.

The draws on ajax.reload() are again mainly for SearchPanes. SearchPanes has to completely rebuild on ajax.reload() because it is possible that the data has changed, and therefore the options in the panes. Because you are using searchPanes.viewTotal there is some extra processing that is required to ensure that the totals and subtotals are accurate and the correct selections have been made. These two draws in addition to the draw called by the main table explain the event calls here.

As for the initial load, there is again one draw for the main table and one from SearchPanes.

I'll take a look into the events within SearchPanes and see if there are any calls that can be reduced or removed, but I suspect that most of them are going to need to be as they currently are.

Hope this helps to explain things,
Sandy

sandy

Hi @mdesmond ,

I took a closer look at this today and managed to remove a few draw() calls. Hopefully you should see an improvement in some places now.

This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

mdesmond

Hi @sandy,

Thank you for taking the time to explain the different calls and events and reduce the draw() calls. I'm sure this will help boost my performance.

Thanks