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

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

1 个答案: