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

Answers

  • 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 https://datatables.net/reference/option/initComplete

    "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.

    Shay

  • 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

  • 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.

    <body>

    image

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

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

    enjoy.........

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

    I used jQuery's BlockUI like this:

    jQuery(document).ready(
        function() {
              $('#tbl_instruments').on( 'processing.dt', function ( e, settings, processing ) {
    
                 $.blockUI(
                   { 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:

              $('#tbl_instruments').DataTable(
                {
                  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 () {
                      $.unblockUI(); 
                 },
    ...
    
Sign In or Register to comment.