Выполнение кода до и после загрузки файла с помощью Datatables (JS)

Question

Я использую Datatables для создания некоторых таблиц с данными. Я использую опцию, они должны включить кнопку загрузки CSV. Однако, поскольку я работаю с большими объемами данных, я хотел разместить на экране gif «Идет загрузка, подождите ...», чтобы пользователи знали, что он загружается. Тем не менее, загрузка gif, которую я имею, требует, чтобы я активировал ее до начала загрузки и деактивировал ее после окончания загрузки (на самом деле это просто добавление класса к телу, что делает его немного прозрачным и добавляет gif колеса). Я не нашел способ запуска кода до и после загрузки. Я думаю, что я могу сделать раньше с action, но не после.

Может кто-нибудь помочь мне с этим? Есть ли способ сделать код до загрузки и после загрузки? Или, в отсутствие этого, возможно, есть лучший способ реализовать ожидающий GIF, пока он готовит CSV для загрузки?

Answer 1

Вы можете расширить csv-кнопку и вызвать оригинальное действие внутри нее. Это позволяет отображать пользовательский индикатор загрузки во время обработки экспорта.

$(document).ready(function() {

  let table = $('#example').DataTable({
    processing: true,
    dom: 'Bfrtip',
    buttons: [{
      extend: 'csv',
      text: 'CSV Export',
      action: function(e, dt, button, config) {
        console.log('csv button clicked');
        this.processing(true); // show indicator on button
        console.log('before csv export');
        config.filename = 'my-export'; // set filename
        $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config); // call export-action
        console.log('after csv export');
        this.processing(false); // hide indicator on button
      }
    }],
  });

});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test-1</td>
      <td>Test 1234</td>
    </tr>
    <tr>
      <td>Test-3</td>
      <td>I dont know!</td>
    </tr>
    <tr>
      <td>Test-2</td>
      <td>Another...</td>
    </tr>
    <tr>
      <td>Alpha-1</td>
      <td>Apple Test</td>
    </tr>
    <tr>
      <td>Alpha-2</td>
      <td>Banana Test</td>
    </tr>
    <tr>
      <td>Alpha-3</td>
      <td>Coconut</td>
    </tr>
    <tr>
      <td>Beta-1</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td>Beta-2</td>
      <td>Not Alpha</td>
    </tr>
    <tr>
      <td>Alpha-1</td>
      <td>Apple Test</td>
    </tr>
    <tr>
      <td>Alpha-2</td>
      <td>Banana Test</td>
    </tr>
    <tr>
      <td>Alpha-3</td>
      <td>Coconut</td>
    </tr>
    <tr>
      <td>Beta-1</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td>Beta-2</td>
      <td>Not Alpha</td>
    </tr>
  </tbody>
</table>