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
function draw( [paging] )
- Description:
Redraw the DataTables in the current context, optionally updating ordering, searching and paging as required.
- Parameters:
Name Type Optional 1 pagingYes - 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):
full-resetortrue(default) - the ordering and search will be recalculated and the rows redrawn in their new positions. The paging will be reset back to the first page.full-holdorfalse- the ordering and search will be recalculated and the rows redrawn in their new positions. The paging will not be reset - i.e. the current page will still be shown.page- ordering and search will not be updated and the paging position held where is was. This is useful for paging (i.e.page()) when data has not been changed between draws.
Please note that the string options require DataTables 1.10.8 or newer. Previous versions support only the boolean option.
- Returns:
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.