JavaScript/jQuery - DataTables show loading/processing message on button click

Question

I have the following snippet which runs when a specific button is clicked (the table is initilised earlier)

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

The data fills the table fine but takes a few seconds. My question is how I'd show a message/gif to show that the data is loading? How would I know when the data has been fully loaded?

INITIALISATION CODE

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

} );

Thanks

lofihelsinki · Accepted Answer · 2019-01-31 10:20:09Z

0

Might be a duplicate to this: https://stackoverflow.com/a/40346664/5601169

The corresponding code, put this after you initialization code:

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

answered Jan 31, 2019 at 10:20

lofihelsinki

2,5812 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript/jQuery - DataTables show loading/processing message on button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related