How can i display loading/processing message inside DataTable?

Question

In my application i am using datatables.net

var ticketHistoryDataTable = $('#ticketHistoryData').DataTable({ 
        paging: false,
        data: [],
        searching: false,
        columns: [
            { data: 'ticket_id'         ,   title: "Ticket Number" },
            { data: 'transactiondate'   ,   title: "Date"          } 
        ]
} );

I am adding data to the table following way:

    var result_data = [{
            ticket_id         : '' ,
            transactiondate   : '' 
    },{
            ticket_id         : '' ,
            transactiondate   : '' 
    }];

    ticketHistoryDataTable.clear().draw();
    ticketHistoryDataTable.rows.add(result_data).draw();

result_data itself comes from jquery ajax get call to server. Retrieving the information may take some time, during which i want to display loading-processing message from datatable. What is correct way of doing this?

the corect way will be to use datatables ajax not an external ajax — madalinivascu
– madalinivascu, Commented Jun 6, 2016 at 6:43
Yes i understand. In my case, if there is a javascript object that is returning the data. I can not make in this case ajax call from datatable but still need to display loading message. — Tornike Shavishvili
– Tornike Shavishvili, Commented Jun 6, 2016 at 6:52
then use the beforeSend ajax event to display a loding message and hide it in the success method — madalinivascu
– madalinivascu, Commented Jun 6, 2016 at 6:55
Yes i understand that. On beforeSend I wand to show loading/processing message from datatable itself. What is correct way of doing this? — Tornike Shavishvili
– Tornike Shavishvili, Commented Jun 6, 2016 at 7:02
Same message it shows when loading data from datatables ajax, not an external ajax? — Tornike Shavishvili
– Tornike Shavishvili, Commented Jun 6, 2016 at 7:32

Tuhin · Accepted Answer · 2016-06-06 09:22:13Z

You can use a loader in your html. Position should be same as the table. How to add a loader in HTML

or Message container: <div id="MessageContainer"></div> and Apply some CSS styles for good look and feel.

     $('#ticketHistoryData')
        .on( 'draw.dt', function () {
            console.log( 'Loading' );
          //Here show the loader.
          // $("#MessageContainer").html("Your Message while loading");
        } )
        .on( 'init.dt', function () {
            console.log( 'Loaded' );
           //Here hide the loader.
            // $("#MessageContainer").html("Your Message while load Complete");
        } )
        .DataTable({ 
            paging: false,
            data: [],
            searching: false,
            columns: [
                { data: 'ticket_id'         ,   title: "Ticket Number" },
                { data: 'transactiondate'   ,   title: "Date"          } 
            ]
     });

For more go through Events of DataTable

I think this might help you.

You might show message

Majid Basirati · Accepted Answer · 2018-02-24 04:27:14Z

4

You can use dom option to show loading:

$('#example').dataTable( {
  "dom": 'lrtip'
} );

"r" letter is related to show loading element.
For more information refer to this link

answered Feb 24, 2018 at 4:27

Majid Basirati

2,9053 gold badges27 silver badges47 bronze badges

Comments

Daniel Koralek · Accepted Answer · 2018-03-09 13:39:15Z

2

When loading data from an Ajax source, you can use the following two events to handle the "Loading..." and "Done" states.

... data table code ...

    }).on('preXhr.dt', function ( e, settings, data ) {

        $(".thealert").html("Loading");

    }).on( 'draw.dt', function () {

        $(".thealert").html("Done");

    });

I hope that helps.

answered Mar 9, 2018 at 13:39

Daniel Koralek

212 bronze badges

Comments

tika · Accepted Answer · 2020-04-09 20:27:36Z

There is way the to display loading message on jQuery DataTable:

$('#myTableId').DataTable({
        "language": {
            'loadingRecords': 'Processing...',
        },

  // 'processing': true,
.
.
})

On above code, // 'processing': true, is commented out, if not there will be two loading messages.

You also can do this way:

$('#myTableId').DataTable({
            "language": {
                'loadingRecords': '&nbsp;',
                'processing': 'Loading...'
            },

You can also show the loading spinner:

$('#myTableId').DataTable({
                "language": {
                    "loadingRecords": "<span class='fa-stack fa-lg'>\n\
                            <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                       </span>&emsp;Processing ..."
                },

Jourmand · Accepted Answer · 2021-09-12 10:34:46Z

0

The answer is simple it uses build in language keyword

oTable = $('#UserTable').DataTable({
         "processing": true, // for show progress bar,
         retrieve: true,
         "language": {
                    'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
         },

edited Sep 12, 2021 at 10:34

Jourmand

97811 silver badges27 bronze badges

answered Sep 11, 2021 at 3:52

Shifaz

113 bronze badges

Collectives™ on Stack Overflow

How can i display loading/processing message inside DataTable?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related