CODEWITHSUNDEEP
javascriptjqueryperformancedatatablesstyling
Andreas
Andreas

Reputation: 674

Improve DataTable performance when modifying class of cell

I'm very satisified using jquery DataTables, but I have found one situation where I need to boost performance. I'm updating the class of a cell depending on the data. To do this I'm using the render function and creating an api instance from the settings to get hold of the cell via the api. Is there a better way for doing this?

{
        "data": "statusText", "className": "status",
        "render": function (data, type, full, meta) {
            switch (type) {
                case "display":
                    var api = new $.fn.dataTable.Api(meta.settings);
                    var td = api.cell({ row: meta.row, column: meta.col }).node();                         
                    switch (full.status) {
                        case Status.Saved:
                            $(td).addClass("status-saved");
                            break;
                        case Status.Sent:
                            $(td).addClass("status-sent");
                            break;
                        default:
                            $(td).addClass("status-saved");
                    }  
                    return full.statusText;
                case "sort":
                    return full.status;
                default:
                    return full.statusText;
             }
        }
    }

Upvotes: 0

Views: 217

Answers (2)

Andreas
Andreas

Reputation: 674

Found out that the rowCallback (documentation here) method is better than the render method. In rowCallback we have access to the DOM row and don’t have to new up api instance and lookup the cell. I still use jQuery and addClass to set the class. Will try plain vanilla instead of jQuery to try to improve performance even more. As suggested by @shyammakwana.me

Upvotes: 0

shyammakwana.me
shyammakwana.me

Reputation: 5752

One possibility I can see is that If you somehow manage to get api and td out of render function. Because that looks like heavy operation.

and make td like below, probably that will work.

var td = $(api.cell({ row: meta.row, column: meta.col }).node());

Further more what you can do is to use vanillaJS instead of addClass

Upvotes: 1

Related Questions