Render function executes 4 (or more) times more than available records.

Tester2017

As a question of performance I was doing tests and I found some strange behavior with the render function.

Take for example this https://editor.datatables.net/examples/plug-ins/fieldPlugin.html one. If you put a counter in the render part you will see that it is executed 24 times, while the record set has only 6 rows.

The code below shows what I have changed in the code of the example. (only adding a counter and an alert in the render function to show the counter. It goes to 24).

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    var renderCount = 0;                            / ADDED FOR TESTING
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/todo.php",
        table: "#example",
        fields: [ {
                label: "Item:",
                name: "item"
            }, {
                label: "Status:",
                name: "done",
                type: "todo", // Using the custom field type
                def: 0
            }, {
                label: "Priority:",
                name: "priority",
                type: "select",
                options: [
                    { label: "1 (highest)", value: "1" },
                    { label: "2",           value: "2" },
                    { label: "3",           value: "3" },
                    { label: "4",           value: "4" },
                    { label: "5 (lowest)",  value: "5" }
                ]
            }
        ]
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/todo.php",
        columns: [
            { data: "priority", className: "center" },
            { data: "item" },
            { 
                className: "center",
                data: "done",
                render: function (data, type, row) {
                    renderCount = renderCount + 1;      // ADDED FOR TESTING
                    alert('count:' + renderCount);           // ADDED FOR TESTING
                    if ( type === 'display' || type === 'filter' ) {
                        // Filtering and display get the rendered string
                        return data == 0 ? "To do" : "Done";
                    }
                    // Otherwise just give the original data
                    return data;
                }
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

allan

There are a number of other discussions on this topic where I've replied with an explanation of this. For example see my reply here.

Allan

Tester2017

OK, read that. But why needs it to execute also for sorting if I need to make my own sort function. I made this test just for knowing where to put some logic. In $.fn.dataTable.ext.order or in render. I thought render would be more efficient because called 1 time, instead $.fn.dataTable.ext.order called every sort event. In my case 11 records, 1 field rendered to an image, render is called 55 times.

allan

Because it needs to get the data in order to then pass it into the sort function.

The render function will be called every time DataTables requests data for a given cell, and it can request it for display, sort, filter, etc, so yes, it will be called multiple times.

Allan