render called 3+ times

ljenner

Hi there,

I am using DataTables 1.10.9
I am using 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! (= 4921*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?

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) {
                    if (window.systemStatus.isOnHold) {
                        renderCount++;
                        console.log(renderCount);
                        if (affectedByHold(full.LifecycleStatus))
                            return '<span class="glyphicon glyphicon-pause on-hold-icon"></span>';
                    }
                    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 row ID is in the list of selected row IDs
            if ($.inArray(rowId, window.transIndexPage.rows_selected) !== -1) {
                $(row).find('input[type="checkbox"]').prop("checked", true);
                $(row).addClass("selected");
            }

            // If system is on hold, highlight the affected Transactions
            if (window.systemStatus.isOnHold) {
                var status = data["LifecycleStatus"];
                if (affectedByHold(status)) {
                    $(row).addClass("affectedByHold");
                }
            }
        }
    });

allan

It is valid and correct that the rendering method is called multiple times for each cell. The reason for this is that DataTables supports orthogonal data - which means that for each data type DataTables needs it must request the data (filtering, sorting and display data can all be different).

If you were to add debugging information to the rendering function, you'll find that DataTables will get the type and filter data types up front. The display type is requested only when the cell is displayed (since you have deferRender enabled) and the sort type requested only when the column is ordered.

As such, you may wish to use different logic depending on the data type that is being requested to speed things up.

Allan