How can I assign a style to a cell in a renderer?

ironandsteel

In one particular column, I want the background of a cell to be rendered in different colors according to the value of that cell. Currently, I set up a renderer and wrap the data in a span of a particular class, and that works pretty well. But I'd rather set the background of the entire cell so the size is uniform. How can I assign a style to the cell in the renderer?

var table = $('#project').DataTable( {
        dom: 'Bfrtip',
        ajax: 'project/php/table.project.php',
        columns: [
            {
                "data": "projectId"
            },
            {
                "data": "name"
            },
            {
                "data": "status",
                render: function(data, type, row) {
                    switch (data) {
                        case 'active':
                            return '<span class="activestatus">' + data + '</span>';
                            break;
                        case 'closed':
                            return '<span class="closedstatus">' + data + '</span>';
                            break;
                        case 'missed':
                            return '<span class="missedstatus">' + data + '</span>';
                            break;
                        case 'hold':
                            return '<span class="holdstatus">' + data + '</span>';
                            break;
                        case 'lead':
                            return '<span class="leadstatus">' + data + '</span>';
                            break;
                        default:
                            return data;
                            break;
                    }

                }
            } ....

scholarlylabs

We tried but were not able to address the parent <td> from a column renderer. If I remember correctly (possible that I don't!), we found a comment from @allan confirming that jQuery selectors (and the DOM) aren't available in the column renderer.

My colleague @alexpereira succeeded in using rowCallback to address the <td> and set a background color for the whole cell. This worked for us with rendered values, which was another requirement for our project. There may be more efficient ways to do this, and we'd be happy to hear about others' approaches.

      'rowCallback': function( row, data, index ) {
            $(row).find('td').each(function(index){
                var cell_value = $(this).text();
                cell_value == 'WhateverValueYouWant'' ? $(this).addClass('yourClasstoSetbgcolor'): 
...and so on...

allan

jQuery selectors (and the DOM) aren't available in the column renderer.

You are correct. The renderer is not designed to be able to modify the node since the renderer might be called before the node has even been created (in the case of deferRender being enabled.

rowCallback is the way to do it if the value is dynamic and might change. If it is going to be static for the life time of the row, createdRow is the most efficient way to do it.

Allan