JavaScript/jQuery - 数据表在单击按钮时显示加载/处理消息

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();
});