Change cell colour based on another cell value

equinox22

I'm attempting to have one cell change colour depending on the value of another cell. The table looks like below:

| Room | Capacity | Current Occupancy |
| ---- | -------- | ----------------- |
| 1    | 5        | 5                 |
| 2    | 10       | 6                 |
| 3    | 3        | 3                 |

Ideally I'd like to have Current Occupancy green if it has not yet reached the Capacity. I've had a look on the forums and there's plenty of examples using the createdCell function and have managed to get it to work with the code below, but it relies on having to give a definitive value, when there isn't one as it could be different for each row.

        columnDefs: [ {
            targets: 16,
            createdCell: function (td, cellData, rowData, row, col) {
                if ( cellData < 1 ) {
                    $(td).css( 'background-color', '#4CBB17' )
                }
            }
        }],

Is there way to do this so that Current Occupancy references the data in Capacity (which is column 15)?

kthorngren

The columns.createdCell docs describe all the parameters available to the function. You will use the rowData parameter:

Data source object / array for the whole row

Kevin

equinox22

Thanks for the response, Kevin.

I've rejigged it like this but am likely not doing this correctly...

        columnDefs: [ {
            targets: 16,
            createdCell: function (td, cellData, rowData, row, col) {
                if ( cellData < rowData ) {
                    $(td).css( 'background-color', '#4CBB17' )
                }
            }
        }],

So what happens now is that Current Occupancy is green at 0 but the colour formatting goes away as soon as it goes above 0, so is not referencing Capacity. I have read the docs but I'm still not able to make heads or tails of this.

I've made a test case here https://live.datatables.net/farihadi/1/edit

kthorngren

rowData contains the full row of data so you need to specify which row element you want to compare to. If you debug the createCell function you can see what rowData is. I added a console.log statement to your test case to show this:
https://live.datatables.net/farihadi/2/edit

I changed your if statement to compare with the Extn column:

if ( cellData === rowData.extn ) {

If your row data is an array then use array notation instead, for example rowData[4].

Kevin

allan

Your test case doesn't use the data you indicated above, but it does look almost right.

if ( cellData = rowData ) {

is an assignment, not a condition though.

If I replace it with:

if ( cellData == 'London' ) {

Then the London cells alone go green. https://live.datatables.net/farihadi/3/edit .

If that doesn't help, perhaps you can update it with what you are having problems with?

Allan

equinox22

I've updated the test case with the data I'm using. With the condition set to less than < one of the rows behaves but the other isn't. Capacity at 10 and Occupnacy at
9 should also be highlighted. https://live.datatables.net/farihadi/4/edit

Though this is what it looks like in my script:

        columnDefs: [ {
            targets: 16,
            createdCell: function (td, cellData, rowData, row, col) {
                console.log(rowData);
                if ( cellData < rowData.lbims_05_ipr_sites.maxoccupancy ) {
                    $(td).css( 'background-color', '#4CBB17' );
                }
            }
        }],

lbims_05_ipr_sites.maxoccupancy is the column in my sql table for Current Occupancy and the console log returns that. It's not behaving on my site, even with the table name taken out just leaving rowData.maxoccupancy.

kthorngren

Post your columns.data config so we can see your data structure.

It could be the data in the cell, ie cellData is a string and rowData.lbims_05_ipr_sites.maxoccupancy is a number so the comparison might not be working as expected. Without seeing the actual issue to debug it will be hard to say what the problem is. Either you will need to do further debugging in the function or post a link to your page or a test case with an example of your data so. we can help debug.

You can get a sample of your data from the browser's network inspector tool by looking at the XHR response. Use that sample data to create a Javascript sourced Datatable, like this example.

Kevin