JavaScript / jQuery - DataTables показывает сообщение о загрузке / обработке при нажатии кнопки

Question

У меня есть следующий фрагмент, который запускается при нажатии определенной кнопки (таблица инициализируется ранее)

table1.ajax.url('/data.json');
table1.ajax.reload();

Данные заполняют таблицу отлично, но занимают несколько секунд.У меня вопрос, как мне показать сообщение / GIF, чтобы показать, что данные загружаются?Как узнать, когда данные полностью загружены?

КОД ИНИЦИАЛИЗАЦИИ

var table1 = $('#day1_table').DataTable( {
    "processing": true,
    scrollY:        "500px",
    scrollX:        true,
    scrollCollapse: true,
    "search": {
        "smart": false
      },
    "lengthMenu": [[5,10, 20, 50, -1], [5,10, 20, 50, "All"]],
    "columnDefs": [
        {
            "targets": [ 0,1,2,23,24,25,26,27,28,29 ],
            "visible": false
        },
        { "width": "200px", "targets": [17] },
        { "width": "100px", "targets": [0,1,2,3,4,5,6,11,12,13,14,15,16,17,18,19,20,21,22] },
        { "width": "50px", "targets": [7,8,9] }
    ],

    "pageLength": 50,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: [ 0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,19,20,21,22 ]
            }
        },
        {
            extend: 'excelHtml5',
            exportOptions: {
                columns: [ 0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,19,20,21,22 ]
            },
            text: 'Export to Excel'
        }
    ],
    // "drawCallback" : function( settings ) {
        // var api = this.api();
        // var pageInfo = api.page.info();
        // $('#total-resource-1').html(pageInfo.recordsDisplay);
    // },
    "createdRow": function ( row, data, index ) {
        if ( data[19] == 'EARLY' ) {
            $('td', row).eq(16).addClass('success-dark');
        }
        else if ( data[19] == 'LATE' ) {
            $('td', row).eq(16).addClass('success-dark');
        }
        else if ( data[19] == 'NIGHT' ) {
            $('td', row).eq(16).addClass('success-dark');
        }
        else if ( data[19] == 'Non-working' ) {
            $('td', row).eq(16).addClass('danger');
        }
    }

} );

Спасибо

Answer 1

Может быть дубликатом этого: https://stackoverflow.com/a/40346664/5601169

Соответствующий код, поместите его после кода инициализации:

table1.on('preXhr.dt', function(e, settings, data){
    $(this).dataTable().api().clear();
    settings.iDraw = 0;   //set to 0, which means "initial draw" which with a clear table will show "loading..." again.
    $(this).dataTable().api().draw();
});