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 unpredicable 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.


function function( e, settings )



Log time taken to draw the page:

var table = $('#example').DataTable();
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.