Best practice for performance

MelodyNelson

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

It's a newbie question but I'm wondering what are the best practices for better performance when you can have large data.

For example : what's the best choice for the data rendering between add it in columns or in columnDefs.
In this example, what would you do for the data price (4) and cost (5) ?

    data: dataSet,
    columns: [
        { data: 'type' },
        { data: 'product' },
        { data: 'creator',
            render: function ( data, type, row ) {
                return '<strong>' + data.company + '</strong><br>' 
                + data.firstName +' '+ data.lastName;
            }
        },
        { data: {
            _: 'created',
            display: 'created.display',
            sort: 'created.tri'
            }
        },
        { data: 'price' },
        { data: 'cost' },
        { data: null,
            render: function ( data, type, row ) {
                var renderer = $.fn.dataTable.render.number(' ', null, 2, null , ' %').display;
                var calcul = ( row.price - row.cost ) / row.price * 100 ;
                return renderer(calcul);
            }
        },
        { data: 'created.display',
            render: function ( data, type, row ) {
                var dateSplit = data.split('/');
                return type === "display" ? dateSplit[2] : data;
            }
        }
    ],
    columnDefs: [
        { render: DataTable.render.number(' ', null, 0, null , ' €'), targets : [4,5] }
    ]

Thank you

kthorngren

what are the best practices for better performance when you can have large data.

This FAQ provides an overview of available options.

what's the best choice for the data rendering between add it in columns or in columnDefs.

There shouldn't be a difference in performance. The idea of columnDefs is to have a place to define column definitions that are the same for multiple columns. You might be interested in the Conflict resolution docs when using columnDefs.

If you aren't defining columns, like in the case of HTML sourced data, the columnDefs is useful to define column options.

what would you do for the data price (4) and cost (5) ?

I would define the rendering function in the columns option. However if the render function is the same then I would use columnDefs to define the function once for both column.. Its more for organizing the code rather than performance optimization.

Kevin

MelodyNelson

Thanks Kevin for the detailed answer.