deferRender

Since: DataTables 1.10

Feature control deferred rendering for additional speed of initialisation.

Description

By default, when DataTables loads data from an Ajax or Javascript data source (ajax and data respectively) it will create all HTML elements needed up-front. When working with large data sets, this operation can take a not-insignificant amount of time, particularly in older browsers such as IE6-8. This option allows DataTables to create the nodes (rows and cells in the table body) only when they are needed for a draw.

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 jQuery delegated events to handle such a situation.

Type

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

Default

  • Value: false

Examples

Enable deferred rendering:

$('#example').dataTable( {
  "ajax": "sources/arrays.txt",
  "deferRender": true
} );

Events with deferred rendering:

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

$('#example').dataTable( {
  "ajax": "sources/arrays.txt",
  "deferRender": true
} );

Related

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