"Processing" works on load but not when using server side filtering

beachcm65

I'm having trouble getting the "processing" (using a spinner) to work correctly when applying a custom filter. The spinner works fine on initial load, but it doesn't appear after I've put text into the search box and press Apply.

Here is a stripped-down example - there's not a ton of data in there so the filtering happens pretty quick. But if you put something in the search, then clear the search and reapply then you should see what I mean.

https://re.templeton.org/sidebar/publications_network_analysis_report.html

beachcm65

Is there more information I need to provide?

colin

Hi @beachcm65 ,

I could see any difference between the first and the second, to be honest. This thread here should help though, it's asking about the processing indicator when using serverSide,

Cheers,

Colin

beachcm65

Thanks Colin - I added more test data so the issue should be much clearer.

Thanks too for the link - I've looked at that as well as others and can't figure out what's wrong. The spinner comes up with the initial load, but not when you put something into the text box (e.g. "1") and click Apply.

I've tried using clear() and draw() after clicking Apply, but obviously I'm not doing something correctly.

allan

It looks like a z-index issue - it is actually displaying, but behind the table. Add:

.dataTables_wrapper .dataTables_processing {
  z-index: 1;
}

to make it visible.

The .spinner element doesn't appear to have any styling, so you just get a white stripe across the table at the moment.

Allan

beachcm65

Great, thanks Allan.

beachcm65

Other other question - is there a way to clear the existing rows so that the spinner/Processing... message is clearer?

colin

You could modify the opacity with CSS perhaps, something like this:

td.faded {
  opacity: 0.2;  
}

And add/remove the class to all tds before/after the spinner with $('tbody td').addClass('faded');

Colin