draw()
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
draw( [paging] )
Redraw the DataTables in the current context, optionally updating ordering, searching and paging as required.
Parameters:
Name | Type | Optional | |
---|---|---|---|
1 | paging | Yes - default:true | |
This parameter is used to determine what kind of draw DataTables will perform. There are three options available (note that the string options require DataTables 1.10.8 or newer):
Please note that the string options require DataTables 1.10.8 or newer. Previous versions support only the boolean option. |
Returns:
DataTables.Api
DataTables API instance
Examples
Filter the table based on a custom input and redraw:
var table = new DataTable('#myTable');
$('#myFilter').on('keyup', function () {
table.search(this.value).draw();
});
Sort and then redraw the table maintaining current paging position:
var table = new DataTable('#myTable');
// 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 = new DataTable('#myTable');
table.page('next').draw('page');
Related
The following options are directly related and may also be useful in your application development.