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

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

beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

    Is there more information I need to provide?

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

    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

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

    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.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

    Great, thanks Allan.

  • beachcm65beachcm65 Posts: 22Questions: 6Answers: 0

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

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

    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

This discussion has been closed.