Change cell colour based on another cell value
Change cell colour based on another cell value
equinox22
Posts: 17Questions: 5Answers: 0
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)?
Answers
The
columns.createdCelldocs describe all the parameters available to the function. You will use therowDataparameter:Kevin
Thanks for the response, Kevin.
I've rejigged it like this but am likely not doing this correctly...
So what happens now is that
Current Occupancyis green at 0 but the colour formatting goes away as soon as it goes above 0, so is not referencingCapacity. 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
rowDatacontains the full row of data so you need to specify which row element you want to compare to. If you debug thecreateCellfunction you can see whatrowDatais. 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 your row data is an array then use array notation instead, for example
rowData[4].Kevin
Your test case doesn't use the data you indicated above, but it does look almost right.
is an assignment, not a condition though.
If I replace it with:
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
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 at9 should also be highlighted. https://live.datatables.net/farihadi/4/edit
Though this is what it looks like in my script:
lbims_05_ipr_sites.maxoccupancyis the column in my sql table forCurrent Occupancyand the console log returns that. It's not behaving on my site, even with the table name taken out just leavingrowData.maxoccupancy.Post your
columns.dataconfig so we can see your data structure.It could be the data in the cell, ie
cellDatais a string androwData.lbims_05_ipr_sites.maxoccupancyis 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