Compare int values and color if higher or lower

SanZamoyski · January 2016

Hi!

I have table consists of datetime column and 16 values.
I generaly sort table by datetime so newwest values are on top.

I would like to compare first row with second, second with third and so on.
If first row value is higher - mark it green if lower - red. Same for all columns with values.

Can it be done with datatables?

Best regards!

allan · January 2016

Use columns.render to do this.

Allan

SanZamoyski · January 2016

Hi!

Thanks for quick response. I'm trying something like this:

code snippet on this forum is a pain...

definied columns:

{ "targets": 1,
                        "data": "Bat00",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },

and function:
function compare_cells(data, type, full, meta){

                var next_data = table.cell(meta.row + 1, meta.col).data();
                            
                if(next_data){
                    if(data > next_data){
                        return '<span style="color:red">'+data+'</span>';
                    }else if(data < next_data){
                        return '<span style="color:green">'+data+'</span>';
                    }else{
                        return data;
                    }
                    
                }else{
                    return data;
                }
                
                }

but color does not change (checked - comparation goes well).

SanZamoyski · January 2016

I'm really lost...

<html>
<head>
    <meta charset="utf-8">
    <title>Biedne wykorzystywane bakteryjki</title>
    <script type="text/javascript" language="javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="jquery.dataTables.min.js">
    </script>
    
    <style>
        td.highlight {
            font-weight: bold;
            color: blue;
        }
    </style>
    
    <script type="text/javascript" class="init">
        
    
        $(document).ready(function() {
            function compare_cells(data, type, full, meta){
                            
                var next_data = table.cell(meta.row + 1, meta.col).data();
                            
                if(next_data){
                    //console.log("A");
                    if(data > next_data){
                        //console.log("B");
                        return '<p style="color:red">red '+data+'</p>';
                    }else if(data < next_data){
                        //console.log("C");
                        return '<p style="color:green">green '+data+'</p>';
                    }else{
                        //console.log("rowne...");
                        return data;
                    }
                    
                }else{
                    return data;
                }
                
                console.log('hę?');
            }
            
            var table = $('#data').DataTable({
                "ajax": "ajax2.php",
                "order": [[ 0, "desc" ]],
                "columns": [
                    { "targets": 0,
                        "data": "time" },
                    { "targets": 1,
                        "data": "Bat00",
                        "render": function ( data, type, full, meta ) {
                            var t = compare_cells(data, type, full, meta);
                            //console.log(t);
                            return t;
                        }
                    },
                    { "targets": 2,
                        "data": "Bat01",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 3,
                        "data": "Bat02",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 4,
                        "data": "Bat03",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 5,
                        "data": "Bat04",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 6,
                        "data": "Bat05",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 7,
                        "data": "Bat06",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 8,
                        "data": "Bat07",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 9,
                        "data": "Bat08",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 10,
                        "data": "Bat09",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 11,
                        "data": "Bat10",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 12,
                        "data": "Bat11",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 13,
                        "data": "Bat12",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 14,
                        "data": "Bat13",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { "targets": 15,
                        "data": "Bat14",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                    },
                    { 
                        "targets": 16,
                        "data": "Bat15",
                        "render": function ( data, type, full, meta ) {
                            return compare_cells(data, type, full, meta);
                        }
                        /*function ( data, type, full, meta ) {
                            //console.log(table.cell(meta.row, meta.col).data() + " ?= " + table.cell(meta.row + 1, meta.col).data());
                            //console.log("hh");
                            if(table.cell(meta.row + 1, meta.col).data()){
                                console.log("A");
                                if(parseInt(table.cell(meta.row, meta.col).data()) > parseInt(table.cell(meta.row + 1, meta.col).data())){
                                    console.log("B");
                                    return '<span style="color:red">'+data+'</span>';
                                }else if(table.cell(meta.row, meta.col).data() < table.cell(meta.row + 1, meta.col).data()){
                                    console.log("C");
                                    return '<span style="color:green">'+data+'</span>';
                                }
                            }
                            
                            return data;
                        
                        }*/
                    }
                ],
                /*"createdRow": function ( row, data, index ) {
                    //console.log('egth');
                    
                        r = index + 1; //next row
                        console.log(r);
                    if(!table.cell(row, index).data()){
                        return '';
                    }
                        
                    for (i = 1; i < 17; i++){
                        var j = i - 1;
                        j = ("0" + j).substr(-2);
                        
                        console.log(data['Bat' + j] + ' ?= ' + table.cell(r, i).data());
                        if(data['Bat' + j] == table.cell(r, i).data()){
                            $('td', row).eq(i).addClass('highlight');
                            console.log('hgl');
                        }
                    }
                }*/
            } );
            
            setInterval( function () {
                table.ajax.reload( null, false ); // user paging is not reset on reload
            }, 30000 );
        } );
    </script>
    
    <link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css">
</head>

<body>

    <table id='data'>
        <thead>
            <tr>
                <th>Czas</th>
                <th>Bat. 0</th>
                <th>Bat. 1</th>
                <th>Bat. 2</th>
                <th>Bat. 3</th>
                <th>Bat. 4</th>
                <th>Bat. 5</th>
                <th>Bat. 6</th>
                <th>Bat. 7</th>
                <th>Bat. 8</th>
                <th>Bat. 9</th>
                <th>Bat. 10</th>
                <th>Bat. 11</th>
                <th>Bat. 12</th>
                <th>Bat. 13</th>
                <th>Bat. 14</th>
                <th>Bat. 15</th>
            </tr>
        </thead>
    </table>
    
</body>

please help.

allan · January 2016

Can you link to a page showing the issue so I can debug it live please.

Allan

SanZamoyski · January 2016

Sent to You by PM.

allan · January 2016

In the compare_cells function the next_data value appears to always be undefined.

This is because you are trying to get the value from the next row in the table - but as each row is added, the next row doesn't yet exist! Hence the undefined value. The rows have to be added sequentially.

So you need to have all of the rows available before you can perform the calculation you want.

On the plus side, once they are there, all you need to do is use rows().invalidate():

$('#data').DataTable().rows().invalidate()

You could add that call into initComplete.

Allan

SanZamoyski · January 2016

Thats incorrect!

"render": function ( data, type, full, meta ) { var t = compare_cells(data, type, full, meta); console.log(t); return t; }

gives console log:
... red 065 interfejs.php:56 green 062 interfejs.php:56 red 208 interfejs.php:56 red 073 interfejs.php:56 red 063 interfejs.php:56 red 059 interfejs.php:56 red 058 ...

allan · January 2016

I've just tried loading the page again but the server is timing out.

When I used Chrome's trace features the next_data value was undefined as I stated. Unfortunately I can't try it again with the server offline.

SanZamoyski · January 2016

It's up now!
My dump router changed ip of the 'server', so forwarding stoped to work.
Fortunetly there was somenone at university who could change this.

allan · January 2016

Thanks for getting the page back online. While you are correct, sometimes the rendered value does return the required HTML, that is not the rendered value that DataTables displays. DataTables will call the render function for a number of things, including the display data, sort data, filter data etc.

My explanation above is still correct and valid.

Did you try running $('#data').DataTable().rows().invalidate() as I suggested above? That would show you the data you want to be rendered (until you reload the data which it appears to be doing periodically).

The issue, as I stated, is that you are trying to check a future row, which has not been added at the point you need it to be. If you can reverse the logic so it will check the previous row, that would work.

Allan

SanZamoyski · January 2016

Ok, now i get it!

I did't try it, since i assumed i do not need dinamical colouring. I've just made in on server side - php generates ajax data with styled span. I know it is not gentle way, but it is fair enought at the moment for me.

Thanks!

Compare int values and color if higher or lower

Compare int values and color if higher or lower

Answers

Howdy, Stranger!

Categories

DataTables

Compare int values and color if higher or lower

Compare int values and color if higher or lower

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables