Conditional formatting using rowCallback

taavip

Hi

I want to color a cell based on it's value. All the sources recommend me to use rowCallback function but for some reason I can't get it working. I'm new to JQuery so maybe there is something really easy I'm missing.

$(document).ready(function() {
    var dt_table = $('#tbl_koond').dataTable({

        language: dt_language,  // global variable defined in html
        aaSorting: [[ 5, "desc" ]],
        lengthMenu: [[25, 50, 100, 200], [25, 50, 100, 200]],
        columnDefs: [
            {orderable: true,
             searchable: true,
             className: "left",
             targets: [0, 1, 2, 3, 4 ,5, 6, 7, 8, 9, 10, 11, 12]
            },
            {
                data: 'foo1',
                targets: [0]
            },
            {
                data: 'foo2',
                targets: [1]
            },
            {   data: 'foo3',
                targets:[2],
                render: function ( data, type, row, meta ) {
                    if(type === 'display'){
                        data = '<a href="http://127.0.0.1:8000/firma/' + encodeURIComponent(data) + '">' + data + '</a>';
                    }

                    return data;
            }
            },
            {
                data: 'foo4',
                targets: [3]
            },
            {
                data: 'foo5',
                targets: [4]
            },
            {
                data: 'foo6',
                targets: [5]
            },
            {
                data: 'foo7',
                targets: [6]
            },
            {
                data: 'foo8',
                targets: [7],
                    render(data){
                        return Number(data).toFixed(0) }
            },
            {
                data: 'foo9',
                targets: [8],
                    render(data){
                        return Number(data).toFixed(0) }

            },
            {
                data: 'foo10',
                targets: [9],
                    render(data){
                        return Number(data).toFixed(0) }

            },
            {
                data: 'foo11',
                targets: [10],
                    render(data){
                        return Number(data).toFixed(0) }
            },
            {
                data: 'foo12',
                targets: [11],
                    render(data){
                        return Number(data).toFixed(0) }
            },
            {
                data: 'foo13',
                targets: [12],
                render(data){
                        return Number(data).toFixed(0) },
            }
        ],

        rowCallback: function (row, data, index) {
            if (data[12] == 100) {
                $("td:eq(12)", row).css('background-color','#99ff9c')
            }
        },

        searching: true,
        processing: true,
        serverSide: true,
        stateSave: true,
        ajax: TESTMODEL_LIST_JSON_URL,


    });
});

kthorngren

Your rowCallback looks like it should work. Without seeing it with your data its hard to say if the if statement is ever true. Please provide a link to your page or a test case representing your data so we can take a look. Or you can use some console.log statements to try debugging. Something like this to start:

        rowCallback: function (row, data, index) {
            console.log( data[12] );
            if (data[12] == 100) {
                console.log('data[12] == 100');
                $("td:eq(12)", row).css('background-color','#99ff9c')
            }
        },

Or you can try something less restrictive in your if statement to make sure it is true for one or more rows.

You can see a simplified version of your code working here:
http://live.datatables.net/kanotafi/1/edit

Kevin

kthorngren

Actually you probably will need to use the same Number(data).toFixed(0) in your if statement, something like this: if (Number(data[12]).toFixed(0) == 100) {....

Kevin

taavip

If I use console.log statement like this, I see the actual data passed to this column:

            {
                data: 'rule_result',
                targets: [12],
                render(data){
                    console.log(Number(data));
                        return Number(data).toFixed(0) }
            }

console.log results:
50.1262703158
50.0917736059
50.1165706664
51.0554469872
58.2240238596
11.5990452766
100

But if I use logging inside callback function, it doesn't return anything. It seems like function is not called at all.

        rowCallback: function (row, data, index) {
            console.log(Number(data[12]));
                if (Number(data[12]).toFixed(0) > 10) {
                    $("td:eq(12)", row).css('background-color','#99ff9c')
            }

console.log results:
25 NaN

Everything looks the same like in your example but it seems like there is no data passing through the function.

kthorngren

What do you see if you console.log the raw data, for example:

rowCallback: function (row, data, index) {
    console.log( data[12] );
.....

Kevin

taavip

rowCallback: function (row, data, index) {
            console.log( data[12] );
                if (Number(data[12]).toFixed(0) > 10) {
                    $("td:eq(0)", row).css('background-color','#99ff9c')
            }

Result:

kthorngren

It might be the data: 'foo13',:

            {
                data: 'foo13',
                targets: [12],
                render(data){
                        return Number(data).toFixed(0) },
            }

Try removing it to see what happens. It appears your source data is arrays not objects. I added a columns.data option to my example and get teh same result of undefined:
http://live.datatables.net/kanotafi/4/edit

Kevin

taavip

If I remove data: 'foo13', all column values turn to 0.

colin

@taavip We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

If I remove data: 'foo13', all column values turn to 0.

Ok, then you will need to access the data using object notation, for example:

rowCallback: function (row, data, index) {
                if (Number(data.foo13).toFixed(0) > 10) {
                    $("td:eq(0)", row).css('background-color','#99ff9c')
            }

If this doesn't help then please post a test case as Colin asked.

Kevin

taavip

It worked! Thank you so much for the help. I thought I already tried it but I guess the condition was not met.

Taavi