Since: DataTables 1.10

Pre-draw event - triggered as the table is about to be redrawn.


This event is triggered when DataTables starts its draw action (finally resulting in the draw event) and can be used to inform you of this state.

This event can also be used to cancel the draw by returning false from the event handler. Please note that if you do this it can leave the table in an unpredictable state as any settings are not reset to their values from before the draw action - for example using order() to change the ordering of the table, but if the draw action is cancelled the data will still have been ordered internally in DataTables, but just not displayed.

Please note that, as with all DataTables emitted events, the event object has a DataTables API instance available on it (the first parameter). Additionally, the events are triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, as shown in the example below. The listener should also be set before the table initialisation, otherwise when a state is attempting to load, the listener will not be set and the code will not run for the initial display of child rows.


function function( e, settings )



Log time taken to draw the page:

var table = new DataTable('#myTable');
var startTime;

	.on('preDraw', function () {
		startTime = new Date().getTime();
	.on('draw.dt', function () {
		console.log('Redraw took at: ' + (new Date().getTime() - startTime) + 'mS');


The following options are directly related and may also be useful in your application development.