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
Airi SatouAccountantTokyo54072008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London57972009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco15622009/01/12$86,000
Bradley GreerSoftware EngineerLondon25582012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco13142011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York48042012/12/02$372,000
Bruno NashSoftware EngineerLondon62222011/05/03$163,500
Caesar VancePre-Sales SupportNew York83302011/12/12$106,450
Cara StevensSales AssistantNew York39902011/12/06$145,600
Cedric KellySenior Javascript DeveloperEdinburgh62242012/03/29$433,060
Showing 1 to 10 of 57 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: