How can i display loading/processing message inside DataTable?
Solution 1
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
Solution 2
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
Solution 3
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.
Solution 4
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> Processing ..."
},
Related videos on Youtube
Comments
-
Tornike Shavishvili over 1 year
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?
-
Tornike Shavishvili almost 8 yearsSame message it shows when loading data from datatables ajax, not an external ajax?
-