DataTables - Button Processing (Excel)

PatrickOfreneo

Hi guys, what should I add in my code below in order to display processing indicator when exporting table to excel?

Thanks in advance!

$('#product-list').DataTable({

 "pageLength" : 10,
   "deferRender": true,
  "processing": true,
       
   dom: 'Bfrtip',
        'buttons': [
            {
                extend: "excelHtml5",
                title: '',
                text: "Download Excel",
                    className: "btn btn-md btn-success btn-track1",
            }

        ],
    
        "ajax": {
            url : "<?php echo base_url(); ?>Users/get_user",
            type : 'GET'

        },
  
         "aoColumns": [
               { "data": "LastName" },                 
                  { "data": "FirstName" },                       
                  { "data": "Gender" },            
                  { "data": "Address" },            
                  { "data": "City" },                               
                  { "data": "Age" }                                       
          
            ]
      
    });

colin

You could use the event buttons-processing - there's an example of just that at the bottom of the page,

Colin

PatrickOfreneo

Hi Colin,

How can I add the code below to my code above? sorry i'm new in datatables.
Thank you!

var table = $('#example').DataTable();
var overlay = $('<div class="ui-blocker">Please wait...</div>'
 
table.on( 'buttons-processing', function ( e, indicator ) {
    if ( indicator ) {
        overlay.appendTo('body');
    }
    else {
        overlay.remove();
    }
} );

colin

This should do the trick:

var table = $('#product-list').DataTable({
 
 "pageLength" : 10,
   "deferRender": true,
  "processing": true,
        
   dom: 'Bfrtip',
        'buttons': [
            {
                extend: "excelHtml5",
                title: '',
                text: "Download Excel",
                    className: "btn btn-md btn-success btn-track1",
            }
 
        ],
     
        "ajax": {
            url : "<?php echo base_url(); ?>Users/get_user",
            type : 'GET'
 
        },
   
         "columns": [
               { "data": "LastName" },                
                  { "data": "FirstName" },                      
                  { "data": "Gender" },           
                  { "data": "Address" },           
                  { "data": "City" },                              
                  { "data": "Age" }                                      
           
            ]
       
    });

var overlay = $('<div class="ui-blocker">Please wait...</div>'
  
table.on( 'buttons-processing', function ( e, indicator ) {
    if ( indicator ) {
        overlay.appendTo('body');
    }
    else {
        overlay.remove();
    }
} );

PatrickOfreneo

Hi Colin, I copied your code but the table is not displaying any data. I guess there's an error with the code.

Please help, thank you!

kthorngren

Did you look in the browser's console for errors?

var overlay = $('

Please wait...

'

Looks like there is a missing ). The statement should look like this:

var overlay = $('<div class="ui-blocker">Please wait...</div>');

Kevin