DataTables example Deferred rendering for speed

When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in deferred rendering option in DataTables with the deferRenderDT option.

When deferred rendering is enabled, rather than having DataTables create all TR and TD nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant performance increase, since a lot less work is done at initialisation time.

The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit significantly from simply enabling this parameter.

NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Loading...
Showing 0 to 0 of 0 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/arrays.txt",
        "deferRender": true
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: