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

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

DudsDuds Posts: 4Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    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

  • DudsDuds Posts: 4Questions: 1Answers: 0
    edited August 2021

    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!

  • allanallan Posts: 61,635Questions: 1Answers: 10,092 Site admin

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

    Allan

  • DudsDuds Posts: 4Questions: 1Answers: 0

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

  • allanallan Posts: 61,635Questions: 1Answers: 10,092 Site admin
    edited August 2021 Answer ✓

    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

  • DudsDuds Posts: 4Questions: 1Answers: 0

    Works! Thank you!

    Do you mind explain what you thought?

Sign In or Register to comment.