Change Row background color problems

biluses

I've seen in the forums that problem is already solved, i used the same code but it's not working and i'm crazy to find a solution. This is my code
the CSS:
.red {
background-color: red !important;
}

$('#example').DataTable({

/*CHANGE BACKGROUND NOT WORKING */
"createdRow": function( row, data, dataIndex ) {
if ( data[5] == "8" ) {
$(row).addClass( 'red' );
}
},

     "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        },
        // Total over all pages
        revenue = api
            .column( 6, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        platforms = api
            .column( 7, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        differences = api
            .column( 8, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

         scrubs = api
            .column( 9, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

         holds = api
            .column( 10, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

         validates = api
            .column( 11, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );


        // Update footer
        $( api.column( 6 ).footer() ).html(
            '<span class="results">$'+(revenue).toFixed(2)+'</span>'
        );
        $( api.column( 7 ).footer() ).html(
            '<span class="results">$'+(platforms).toFixed(2)+'</span>'
        );
        $( api.column( 8 ).footer() ).html(
            '<span class="results_bad">$'+(differences).toFixed(2)+'</span>'
        );
        $( api.column( 9 ).footer() ).html(
            '<span class="results_bad">$'+(scrubs).toFixed(2)+'</span>'
        );
        $( api.column( 10 ).footer() ).html(
            '<span class="results_bad">$'+(holds).toFixed(2)+'</span>'
        );
        $( api.column( 11 ).footer() ).html(
            '<span class="results">$'+(validates).toFixed(2)+'</span>'
        );
    },

    responsive: true,
    bPaginate: false, 
    dom: "Bfrtip",
    ajax: "examples/php/incomes.php",
    columns: [
        {   // Responsive control column
            data: null,
            defaultContent: '',
            className: 'control',
            orderable: false
        },
        {   // Checkbox select column
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        { data: "advertisers.nombre" },
        { data: "advertisers.id_am" },
        { data: "incomes.clicks" },
        { data: "incomes.conversion" },
        { data: "incomes.revenue" , render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "incomes.platform_revenue" , render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "incomes.scrubs" , render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "incomes.hold" , render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "incomes.difference" , render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "incomes.validated", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
        { data: "status.name" },
        { data: "incomes.date" },
        { data: "incomes.notas_am" },
        { data: "incomes.notas_finance" }
    ],
    order: [ 2, 'asc' ],
    select: {
        style:    'os',
        selector: 'td.select-checkbox'
    },
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor },
        {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }
    ],  
});

// highlights table
var table = $('#example').DataTable();
$('#example tbody')
.on( 'mouseenter', 'td', function () {
var colIdx = table.cell(this).index().column;

        $( table.cells().nodes() ).removeClass( 'highlight' );
        $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
    } ),

// $('#example tbody').on( 'click', 'td', function () {
// alert( 'Clicked on: '+this.innerHTML );
// console.log(this); /.addClass( 'red' );/
// } ),

// Event listener to the two range filtering inputs to redraw on input

// $('#min, #max').keyup( function() {
// table.draw();
// } );
$('#min').change( function() {
table.draw();
} )

});

kthorngren

Since you are defining your columns as objects, { data: "advertisers.nombre" }, for example, you will need to access the name instead of position. Something like this should work:

"createdRow": function( row, data, dataIndex ) {
if ( data.incomes.platform_revenue == "8" ) {
$(row).addClass( 'red' );
}
},

Kevin

biluses

@kthorngren PERFECT!!! that works for me. Very greatful for your help

giorgiolaconi

Perfect for me too! Thank you. Grazie