blindProgrammer blindProgrammer - 5 months ago 229
jQuery Question

How can i display loading/processing message inside 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 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?

EOF EOF
Answer

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

Comments