Display 'Loading ...' message without using the ajax function of DataTable()

Keith Clark

I am currently using the following to populate a page on my site:

$(document).ready(function() {
    $.ajax({
        'url': '/RetrieveData',
        'type': 'POST',
        'dataType': 'json',
        success: function(response) {
            $('#pagefield1').html(response.PageField1);
            $('#pagefield2').html(response.PageField2);
            $('#pagefield3').html(response.PageField3);
            $('#pagefield4').html(response.PageField4);

            numRows = 25;

            table = $('#table1').DataTable({
                'pageLength': numRows,
                'autoWidth': false,
                'data': response.TableData,
                'columns': [
                    { 'data': 'col0', 'name': 'col0' },
                    { 'data': 'col1', 'name': 'col1' },
                    { 'data': 'col2', 'name': 'col2' },
                    { 'data': 'col3', 'name': 'col3' },
                    { 'data': 'col4', 'name': 'col4' }
                ],
                'columnDefs': [
                    { 'visible': false, 'targets': [0] },
                    { 'sortable': false, 'targets': [4] },
                    { 'width': '150px', 'targets': [1] },
                    { 'width': '75px', 'targets': [2, 3] },
                    { 'width': '100px', 'targets': [4] },
                    { 'type': 'currency', 'class': 'cell-right', 'targets': [1] },
                    { 'class': 'cell-center', 'targets': [2, 3] },
                    {
                        'render': function(data, type, row) {
                            return '<span data-tooltip="ID: ' + row.Id + '">' + data + '</span>';
                        },
                        'targets': 1
                    }
                ],
                'order': [
                    [1, 'asc']
                ]
            });
        },
        error: function(xhr, ajaxOptions, thrownError) {
        }
    });
}); 

The problem I ran into was the area where the table was supposed to be remains blank until the ajax processes and hands data off to the $('#table1').DataTable() function call.

I want to be able to display the table the same way as if there was no data found, but instead of displaying 'No data found' message, I want it to display a 'Loading ...' message.

I have achieved what I was trying to do by adding the following before the above code in the $(document).ready() function and adding a table.destroy(); at line 13 of the above code:

table = $('#taskorders').DataTable({
    'data': [
        {
            'col1':'',
            'col2':'',
            'col3':'Loading ...',
            'col4':''
        }
    ],
    'columns': [
        { 'data': 'col0', 'name': 'col0' },
        { 'data': 'col1', 'name': 'col1' },
        { 'data': 'col2', 'name': 'col2' },
        { 'data': 'col3', 'name': 'col3' },
        { 'data': 'col4', 'name': 'col4' }
    ],
    'columnDefs': [
        { 'visible': false, 'targets': [0] },
        { 'sortable': false, 'targets': [4] },
        { 'width': '150px', 'targets': [1] },
        { 'width': '75px', 'targets': [2, 3] },
        { 'width': '100px', 'targets': [4] },
        { 'type': 'currency', 'class': 'cell-right', 'targets': [1] },
        { 'class': 'cell-center', 'targets': [2, 3] },
        {
            'render': function(data, type, row) {
                return '<span data-tooltip="ID: ' + row.Id + '">' + data + '</span>';
            },
            'targets': 1
        }
    ]
});

I feel there has GOT to be a better way of doing this. Can anyone point me in the right direction??

allan

If you use ajax to load the data, then DataTables can show the loading message for you. If you don't use that option, DataTables can't know when you've started your own Ajax request, so there isn't any way for it to display a loading message with that approach.

The only option I can think of would be to have <tr><td colspan="...">Loading...</td></tr> in your HTML and then remove that before initialising the DataTable.

Regards,
Allan