How to properly use processing() plugin to notify export button activity

Duds

I have an export html (excelHtml5) and I want to show the processing message when the user presses the button:

{
                    extend: 'excelHtml5',
                    title: '',
                    text: 'Exportar (xlsx)'+' <a style="color: #205081; font-size: 17px;" title="A exportação se limita ao número de empresas apresentadas. Se necessário, altere aquele número. A exportação de um número grande de empresas pode demorar, basta aguardar." class="glyphicon glyphicon-info-sign"></a>',
                    filename: 'Empresas_'+'<?php echo date('d-m-Y'); ?>',
                    exportOptions: {
                        columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
                        // modifier: {
                        //     search: 'current',
                        //     page: 'all',   // Not works when serverSide is enabled bc it's a client-side feature.
                        // },
                    },
                    // Adding custom behaviour calling default function
                    // https://datatables.net/forums/discussion/56199/how-can-i-use-a-custom-action-in-a-extended-button
                    action: function( e, dt, node, config) {
                        dt.processing(true);
                        // dt.fnProcessingIndicator();
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
                        // dt.fnProcessingIndicator(false);
                        dt.processing(false);
                    },
                },

But the Datatable notifier isn't showing up even when exporting a lot of rows.

If I comment dt.processing(false); the Datatable notifier will show when the exporting process had already been finished (and stays forever).

What should I do to show the notifier when the user initiates the export process and hide it when the export finishes?

colin

button().processing() is for the button, not for the table (i.e. not dt.processing() as in your code), so you would do something like this,

Colin

Duds

Oh, I saw an example where he used processing() for the table. If I do this way that you are proposing the processing message will always show for 1s. And if the request take more time?

Thanks for the quick reply!

allan

Did you include the processing() plug-in API method? It isn't yet in DataTables core.

Allan

Duds

I copy/pasted the plug-in code into my JS global script.

This works:

action: function( e, dt, node, config) {
                        // var that = this;
                        dt.processing(true);

                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);

                        setTimeout(function() {
                            dt.processing(false);
                        }, 1000);
                    }

But I wish there's a way to do it without using setTimeout().

allan

The action function is synchronous, so it should work without that. My guess is that perhaps the browser isn't re-painting while it is performing the export (since it is synchronous). Try:

                    action: function( e, dt, node, config) {
                        var that = this;
                        dt.processing(true);
 
                        setTimeout(function() {
                            $.fn.dataTable.ext.buttons.excelHtml5.action.call(that, e, dt, node, config);
                            dt.processing(false);
                        }, 10);
                    }

Allan

Duds

Works! Thank you!

Do you mind explain what you thought?