draw()

Since: DataTables 1.10

Redraw the table.

Description

When you perform an action such as adding or deleting a row, changing the sorting, filtering or paging characteristics of the table you'll want DataTables to update the display to reflect these changes. This function is provided for that purpose.

A draw is not performed automatically by most DataTables API actions to allow grouping of actions (for example adding multiple rows is more efficient if you group them. Keep in mind that due to the chaining nature of the DataTables API calling the draw() method is just a case of adding .draw() to your other API method calls, as shown in the examples below.

Note that calling draw() with any option other than the first parameter being page will result in a full re-order and re-search of the table being performed. The page option is provided when you wish the table to be updated but for these actions not to occur (for example a page change does not require a full re-order / re-search).

Type

function draw( [paging] )

Description:

Redraw the DataTables in the current context, optionally updating ordering, searching and paging as required.

Parameters:
Returns:

DataTables API instance

Examples

Filter the table based on a custom input and redraw:

var table = $('#example').DataTable();

$('#myFilter').on( 'keyup', function () {
	table
		.search( this.value )
		.draw();
} );

Sort and then redraw the table maintaining current paging position:

var table = $('#example').DataTable();

// Sort by column 1 and then re-draw
table
	.order( [[ 1, 'asc' ]] )
	.draw( false );

Change the table's page and then redraw (using the page option):

var table = $('#example').DataTable();

table.page( 'next' ).draw( 'page' );

Related

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