Как создать загрузчик во время экспорта таблицы данных

Question

Я пытаюсь скрыть div с помощью `dataTable` и показать div с помощью` loader` во время экспорта данных из dataTable с помощью одной из кнопок, но ничего не произошло.
DataTableButtons версия 1.6.2
Мой код:

HMTL:

<div class="loader-div">
// HERE is loader instance
</div>
<div class="table_div">
   <table class="table table-bordered" id="example">

   </table>
</div>

JS:

let dataTable = $('#example').dataTable({
  dom: 'Bfrtip',
        buttons: [
            'csv', 'pdf'
        ]
}),
$loaderDiv = $('.loader-div'),
$tableDiv = $('.table_div');

dataTable.on('buttons-processing', function (e, indicator) {
            setTimeout(function () {
                if (indicator) { 
                    $tableDiv.css('display', 'none', 'important');             
                    $loaderDiv.css('display', 'block', 'important');     
                } else {       
                    $loaderDiv.css('display', 'none', 'important');
                    $tableDiv.css('display', 'block', 'important');
                }
            }, 50);
        })

Есть предложения или решения проблемы?

Answer 1

Мне нужно создать настраиваемую кнопку и вызвать выбранный тип экспорта.
Вот код:

$('#example').dataTable(function() {
 // another dataTable options
 buttons: [
            {
                text: 'TESt',
                action: function (e, dt, node, config) {
                    let that = this;
                    $tableDiv.css('display', 'none', 'important');
                    $loaderDiv.css('display', 'block', 'important');

                    setTimeout(function () {
                        $.fn.dataTable.ext.buttons.pdfHtml5.action.call(that, e, dt, node, config);

                        $loaderDiv.css('display', 'none', 'important');
                        $tableDiv.css('display', 'block', 'important');
                    }, 50);
                }
            }
        ]
})