deferRender

Since: DataTables 1.10

Feature control deferred rendering for additional speed of initialisation.

Description

When DataTables loads data from an Ajax or Javascript data source (ajax and data respectively) it can create all HTML elements needed up-front or it can wait until the cells for each row are actually needed for display. This option provides the ability to control that behaviour.

This is effectively a performance parameter - when working with large data sets, creating thousands of DOM nodes operation can take a significant amount of time. This option allows DataTables to create the nodes (rows and cells in the table body) only when they are needed for a draw (paging must be enabled for this to be effective).

As an example to help illustrate this, if you load a data set with 10,000 rows, but a paging display length of only 10 records, rather than create all 10,000 rows, when deferred rendering is enabled, DataTables will create only 10. When the end user then sorts, pages or filters the data the rows needed for the next display will be created automatically. This effectively spreads the load of creating the rows across the life time of the page.

Note that when enabled, it goes without saying that not all nodes will always be available in the table, so when working with API methods such as columns().nodes() you must take this into account. Below shows an example of how to use delegated events to handle such a situation.

The only reason to disable this option is if you must have all DOM elements available, even those currently not in the document.

Type

This option can be given in the following type(s):

boolean

Default

Value: true

Examples

Disable deferred rendering:

new DataTable('#myTable', {
	ajax: 'sources/arrays.txt',
	deferRender: true
});

Events with deferred rendering:

var table = new DataTable('#myTable', {
	ajax: 'sources/arrays.txt'
});

table.on('click', 'tbody td', function () {
	alert('Clicked on: ' + this.innerHTML);
});

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

Options