javascript - How can i display loadingprocessing message inside DataTable? - Stack Overflow

admin管理员组

文章数量:1208155

In my application i am using datatables

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?

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?

• javascript
• jquery
• datatables

Share Improve this question Follow asked Jun 6, 2016 at 6:38 Tornike ShavishviliTornike Shavishvili 1,35466 gold badges1919 silver badges4040 bronze badges 10

• the corect way will be to use datatables ajax not an external ajax – 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 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 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 Commented Jun 6, 2016 at 7:02
• 1 Same message it shows when loading data from datatables ajax, not an external ajax? – Tornike Shavishvili Commented Jun 6, 2016 at 7:32

 |  Show 5 more comments

5 Answers 5

Sorted by: Reset to default 6

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

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

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.

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': ' ',
                '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 ..."
                },

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>'
         },

本文标签： javascriptHow can i display loadingprocessing message inside DataTableStack Overflow