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

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

Keith ClarkKeith Clark Posts: 2Questions: 2Answers: 0
edited January 2018 in Free community support

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??

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin
    Answer ✓

    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

Sign In or Register to comment.