show spinner when report is being rendered

idris_bengali · September 2017

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.

Rob Brun · 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_bengali · September 2017

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_bengali · September 2017

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

idris_bengali · September 2017

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>

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

enwood · 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(); 
             },
...

show spinner when report is being rendered

show spinner when report is being rendered

Answers

Howdy, Stranger!

Categories

DataTables

show spinner when report is being rendered

show spinner when report is being rendered

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables