Searchpanes: loading event on filter

pankus

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I'm using the excellent Searchpanes extension (great job!). Since the table I'm processing is quite big (ca 5000 rows), while Cascade Pane is enabled, it takes some time to have the new data filtered (and consequently a redrawn Searchpane). Although this behavior is understandable, some users may think that nothing is happening.
Is there any chance to show some sort of loader (something like the option processing: true) to make this process more intuitive and show users that something is going on?
Alternatively, how can I get the filter event?

colin

You could so something like this here - http://live.datatables.net/wejepeti/1/edit

It's triggering both when an SearchPanes option is clicked, and again when the main table has been drawn. You could use those events to show a processing icon,

Colin

pankus

Thank you Colin... I guess this is the right way, but there is still something missing. As far as I can understand (I'm not a programmer), this works with data from DOM. Is it the same for an ajax call?
Unfortunately, it does not work in my case study

$(document).ready( function () {
  var table = $('#example').DataTable({
    processing: true,
    ajax: mydataurl,
    dom: 'Plfrtip',
    initComplete: function() {
      $('.dtsp-panesContainer table tr').on('click', function() {
        console.log('show processing icon');
        $('#maindata_processing').css('display', 'block');
      });
    }
  }).
  on('draw', function() {
    console.log('clear processing icon if present');
    $('#maindata_processing').css('display', 'none');
  });
});

colin

Agreed, it seems that ajax.reload() causes the event listener to be dropped. I've raised it internally (DD-1844 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

sandy

Hi @pankus ,

When ajax.reload() is called searchpanes completely rebuilds itself, which means that the original instances are completely destroyed and new ones created. initComplete on the parent DataTable is not run again at this point though.

As a fix what I would suggest you do is to make use of the initComplete option of the SearchPanes using searchPanes.dtOpts rather than the parent DataTable. Take a look at this example.

This should ensure that your loading symbol is displayed.

Thanks,
Sandy

pankus

Thank you, Sandy.
Yet, unfortunately, your solution does not seem to prevent that the event listener is dropped.

colin

I just tried Sandy's example here and I'm getting the console log message on the draw as expected. Can you give some more information please on how you're not seeing the events.

Colin

pankus

Well, to a more detailed examination, the solution proposed does the job (modified example).
Yet, I can actually say that I notice a consistent delay between the keyup and the loader's showing when more than 57 rows are in order (as in my working environment). Unfortunately, I could not load an ajax source with, let's say, 5k rows to reproduce such behavior.

colin

That might just be the time it takes to redraw the panes perhaps. 5k rows with searchPanes.cascadePanes can be slow, so that might be unavoidable. What kind of delay are we talking about? How long are you seeing?

Colin

pankus

The delay that I'm talking about is quite exiguous, nothing that may hamper this astonishing datatables extension's functionality: let's say, less than a second.
Anyway, is there any chance to modify the above example and load 5k rows? Maybe what I'm trying to highlight will reveal by itself (I'm sorry for my low lexical skill concerning programmer jargon and concepts).
In sum, I would like to point out your attention to the fact that, when large datasets are in order, users may expect something happens on click, just before both the tables (namely the main table and searchPanes) are redrawn.
Thank you for your answers. I greatly appreciated your help.

colin

I tried it [here] (https://datatables.net/extensions/searchpanes/examples/performance/searchPanes5k.html "here") - this has 5k rows. You can add this code in the browser's console:

$('#example').DataTable().on('draw', function() {
    console.log('clear processing icon if present');
  });

and I'm not seeing any delay. Even on the table with 50k rows, the console message is immediate, so we'll really need to see this to be able to progress it.

Colin

pankus

Wonderful! This definitely puts an end to the issue and clarifies that it is most likely my code that is underperforming. In the next few days, I will try to understand better where the bottleneck is. I hope others will benefit from the discussion.
Thank you very much.