Conditional formatting using rowCallback
Conditional formatting using rowCallback
taavip
Posts: 5Questions: 1Answers: 0
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,
});
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Your
rowCallbacklooks like it should work. Without seeing it with your data its hard to say if theifstatement 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: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
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
If I use console.log statement like this, I see the actual data passed to this column:
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.
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.
What do you see if you console.log the raw data, for example:
Kevin
Result:
It might be the
data: 'foo13',:Try removing it to see what happens. It appears your source data is arrays not objects. I added a
columns.dataoption to my example and get teh same result ofundefined:http://live.datatables.net/kanotafi/4/edit
Kevin
If I remove data: 'foo13', all column values turn to 0.
@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
Ok, then you will need to access the data using object notation, for example:
If this doesn't help then please post a test case as Colin asked.
Kevin
It worked! Thank you so much for the help. I thought I already tried it but I guess the condition was not met.
Taavi