Datatables: How to show a message while data is exported (Excel, PDF, etc)?

Question

I use DataTables buttons plugin to export my data to Excel, PDF, etc. But when many rows of data have to be exported the process sometimes takes a lot of time while the file is created, I like to show a message that indicates the download is in progress until the 'save as' window appears.

I only have implemented the standard buttons configuration in the inicialization of datatable.

Many thanks in advance for any idea or suggestion.

Have you tried searching for some online resources? Like this one — ZombieChowder
@ZombieChowder thanks for the suggestion I'll review it and back to share the results. — Leonel Garcia

Leonel Garcia Leonel Garcia · Accepted Answer · 2019-10-16T16:23:56

As I'm using server side processing to get the data of my datatable I enabled the "Processing" and "bprocessing" options and customize the spinner with language' parameters as follows:

$('#my_table').DataTable({
        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
        "columnDefs": [
            { "className": "dt-body-center", "targets": "_all" }
        ],
        "responsive": true,
        "processing": true, 
        "bProcessing": true,
        "autoWidth": false, 
        "serverSide": true,
        "ajax": "url",
        "aaSorting": [2, 'desc'],

        "pagingType": "full_numbers",
        "language": {
            "sProcessing": '<i class="fas fa-asterisk fa-spin fa-6x fa-fw"></i> 
             <br>PROCESSING <br> Please wait...',
            },
           },
        dom:
            "<'row'<'col-sm-4'B><'col-sm-4 text-center'l><'col-sm-4'f>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-md-7'i><'col-sm-5'p>>",

            buttons:[
            {
                extend: 'excelHtml5',
                text:'<i class="fas fa-file-excel fa-lg"></i>',
                titleAttr: 'Exportar a Excel (XLSX)',
                className:'btn btn-success',
                title:'DAWPs Data',
                action: newexportaction,
            },
            {
                text:'<i class="fas fa-sync"></i>',
                titleAttr: 'Limpiar filtro',
                className:'btn btn-secondary',
                action: function (e, dt, node, config) {
                        dt.search('').draw();
                        dt.order([2,'desc']).draw();
                }
            },
        ],

    });

With these modifications now when I clicked on export to excel button the spinner is showed in the table body; according the information I found, this only works when you're using server side.

Datatables: How to show a message while data is exported (Excel, PDF, etc)?

1 Answers