Busy indicator during a search/column sort?

Busy indicator during a search/column sort?

barncattechbarncattech Posts: 25Questions: 4Answers: 0
edited October 2020 in General

Is it possible to indicate in some manner that a search is taking place? If there was a "completed" callback on search, I could put up a "busy" indicator, and then clear it when it finishes.

This is generally not a big issue, but once I get 4500 rows (for example), my search takes 8-9 seconds, and it would be great to tell the user to be patient. The search I'm doing is that when a checkbox is changed, it will filter the current rows to ones where the "pref" column == 1. If not checked, it will show records with any numeric value in that column. Maybe there is a faster way to do this? I am not doing server side- maybe that is the answer, but I've not delved into that.

I see similar wait times when I click on a column to have it sort on that column. Maybe there is a way to have it automatically show a busy indicator on the cursor or something similar?

$("#prefcheck").change(function() {
    if($(this).is(":checked")) {
        addtable.columns(4).search(1).draw();
    }   else {
        addtable.columns(4).search("^[0-1]$", true).draw();
    }
});

This question has an accepted answers - jump to answer

Answers

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

    You should be able to use processing, and/or processing, to help with that. It would be worth considering serverSide, as that would bring down those wait times,

    Colin

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited October 2020 Answer ✓

    If there was a "completed" callback on search, I could put up a "busy" indicator, and then clear it when it finishes.

    But you could use drawCallback: https://datatables.net/reference/option/drawCallback
    I use busyLoad as processing indicator: https://piccard21.github.io/busy-load/

    Here is some sample code:

    ....
    $.busyLoadSetup({ fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" });
    
    var table = $('#example').DataTable( {
        drawCallback: function( settings ) {
            $.busyLoadFull("hide");
        }
    } );
    
    //when the search field changes display the spinner
    $('*[type="search"][class="form-control"]').change( function() {
        $.busyLoadFull("show");
    } );
    
  • barncattechbarncattech Posts: 25Questions: 4Answers: 0

    I'm still working on it, but this was a big help. If I have time, I'll make a test version that I can make public. Thanks!

This discussion has been closed.