Why is DataTables render function called 3 times?

Question

I am using DataTables 1.10.9, with client-side processing.

I am using the 'ajax' option to retrieve the data for the DataTable.

I have put a small console.log(renderCount) in the 'render' function.

There are 4,921 rows in the table.

However, the console shows that the render function is being called a total of 14,772 times!

(14,772 = number of rows * 3 + 11)

I believe this would be slowing down the rendering process.

What's more - I have the 'deferRender' option set - so I would have thought that the render function should only be called 10 times, which is the default page size.

Whats going on?

Besides server-side processing - how can I improve the initial rendering performance for this table???

Here is an example of one row's data:

{ 
    Id: 1, 
    Type: "Purchases", 
    LifecycleStatus: "Manual", 
    ReceivedAtLocal: "04/02/2016 20:45:16", 
    ModifiedAtLocal: "04/02/2016 21:45:16", 
    Operator: "a-mjohn", 
    PartNumber: "IXAWGCAUNVJHONP" 
}

Here is the table definition code:

    var renderCount = 0;
    transactionTable = $("#tblTransactions").DataTable({
        "searchDelay" : 500,
        "bDestroy": true,
        "ajax": window.getTransactionDataUrl,
        "processing": false,
        "deferRender" : true,
        "columns": [
            {
                'render': function (data, type, full, meta){                        
                    // Other code omitted for brevity
                    renderCount++;
                    console.log(renderCount);
                    return "";
                },
                "bSortable": false
            },
            {
            'render': function (data, type, full, meta) {
                return '<input type="checkbox">';
            },
            "bSortable": false
        },
        { "data": "Id" },
        { "data": "Type" },
        { "data": "LifecycleStatus" },
        { "data": "Operator" },
        { "data": "PartNumber" },
        { "data": "ReceivedAtLocal" },
        { "data": "ModifiedAtLocal" },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#detailsModal'>Details</button>", "bSortable": false },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#auditModal'>Audit</button>", "bSortable": false },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#commentModal'>Comments</button>", "bSortable": false }
    ],
    "rowId": "Id",
    'order': [[7, "asc"]],
    'rowCallback': function (row, data, dataIndex) {
        // Get row ID
        var rowId = data["Id"];

        if ($.inArray(rowId, window.transIndexPage.rows_selected) !== -1) {
            $(row).find('input[type="checkbox"]').prop("checked", true);
            $(row).addClass("selected");
        }
    }
});

Answer 1

Function defined by render option is indeed called multiple times, because jQuery DataTables uses returned value for multiple purposes.

From the manual:

Note that this function might be called multiple times, as DataTables will call it for the different data types that it needs - sorting, filtering and display.

You can return different values for different operations based on provided type argument. This may be needed if you want one value to be displayed and another to be used for sorting. For example, this is helpful with fields containing dates.

You can improve performance by using deferRender in client-side processing mode or switching to server-side processing mode. Please note that in server-side processing mode you would need to implement sorting, pagination and filtering by yourself on the server.