show spinner when report is being rendered

show spinner when report is being rendered

idris_bengaliidris_bengali Posts: 20Questions: 3Answers: 1

Which event can be used or how to show a spinner, when a report is being rendered? HTML sourced data.

This is not when a table is being redrawn or a column sorted. This is the first load/rendering of the report.

Thank you.

This question has an accepted answers - jump to answer


  • Rob BrunRob Brun Posts: 56Questions: 2Answers: 14
    edited September 2017

    Hi idris_bengali, I know that you can use the init complete event to hide your spinner

    "initComplete": function(settings, json) {
        $("#spinner).css('visibility', 'hidden');

    Are you asking when to make your spinner visible? Because that is kind of up to you. Is your report loaded on a button push, or when the page is loaded. There are events for these things outside of the dataTables api.


  • idris_bengaliidris_bengali Posts: 20Questions: 3Answers: 1

    the report is triggered with button push on a criteria selection html. ( no datatables involved here) At this point we have a customer spinner.

    The moment the report program runs and is merging data with the datatables html , the first spinner disappears and then till the entire data is rendered, this is the time we would like to show a spinner. once the report is rendered and the export buttons are visible above the report, the spinner needs to disappear.

    Thank you Shay for taking the time to respond.


  • idris_bengaliidris_bengali Posts: 20Questions: 3Answers: 1

    anyone else has a suggestion to show a spinner or even a message when the table is being rendered? thanks

  • idris_bengaliidris_bengali Posts: 20Questions: 3Answers: 1
    Answer ✓

    This discussion can be closed. Defined a spinner div in the body with display set to block, so that the spinner shows up right away.



    in the document ready function, using fnDrawCallback the spinner div's are turned off

    $(document).ready( function () {
    "fnDrawCallback": function() {
    // Hide the Loading Spinner...
    document.getElementById('loadingmsg').style.display = 'none';
    document.getElementById('loadingover').style.display = 'none';


  • enwoodenwood Posts: 5Questions: 2Answers: 0
    edited September 2017

    I used jQuery's BlockUI like this:

        function() {
              $('#tbl_instruments').on( 'processing.dt', function ( e, settings, processing ) {
                   { message: '<h4>Please wait while instruments are loaded...</h4>',
                     css: { 
                     border: 'none', 
                     padding: '15px', 
                     backgroundColor: '#000', 
                     '-webkit-border-radius': '10px', 
                     '-moz-border-radius': '10px', 
                     opacity: .5, 
                     color: '#fff' 

    and then in the datatable definition, unblocked the UI in the initComplete callback:

                  ajax       : ajax_source,
                  order      : [[0, 'desc']],
                  searching  : true,
                  stateSave  : false,
                  columns    : [
                        {"data": "instrument_no"},
                        {"data": "date_registered"}
                  scrollBodyHeight: "440", // This option is not compatible with the scrollCollapse option
                  scrollY:          "440",
                  deferRender:    true,
                  scroller: {
                      loadingIndicator: true
                  initComplete: function () {
This discussion has been closed.