How can I display the loading / processing message inside the DataTable?
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 like this:
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. It may take a while to get the information, during which time I want to display the loading processing message from the datatable. What is the correct way to do this?
source to share
You can use a loader in your html. The position must be the same as in the table. How to add a loader to HTML
or Message container: <div id="MessageContainer"></div>
and Apply some CSS styles for a nice look.
$('#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 details go through DataTable Events
I think this might help you.
You can show the message
source to share
You can use the option dom
to download:
$('#example').dataTable( {
"dom": 'lrtip'
} );
The "r" letter is associated with the display of the download item.
For more information refer to this link
source to share
When loading data from an Ajax source, you can use the following two events to handle the Loading ... and Ready states.
... data table code ...
}).on('preXhr.dt', function ( e, settings, data ) {
$(".thealert").html("Loading");
}).on( 'draw.dt', function () {
$(".thealert").html("Done");
});
I hope this helps.
source to share