Issue with fnRowCallback - Need assistance ASAP

sjslall

I am using DataTables v1.8.1
All is working fine, however when trying to retrieve the cell value (aData[6]), it reports as undefined.
The table with all rows and column are rendered as expected, no problem at at all.
I need the fnRowCallback to add a class to the aData[6] elements (Color Coded - ACTIVE, EXPIRED and EXPECTED).
My code as below:


$('#DNDList').dataTable( {
"aaData": data,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnRowCallback": function(nRow, aData )
{ // aData[6] returns: ACTIVE or EXPIRED or EXPECTED TODAY, but the progbar1 div only reports "undefined", so can't add the class to the rows.
$('#progbar1').append('
'+aData[6]);
but the progbar1 div only reports "undefined", so can't add


return nRow;
},
"aoColumns":
[ {'mDataProp':'ID'},
{'mDataProp':'Title'},
{'mDataProp':'Ent'},
{'mDataProp':'Contract'},
{'mDataProp':'CreatedOn'},
{'mDataProp':'ExpiresOn'},
{'mDataProp':'Status'}
]


});

I tried putting an if statement, but as the value returned is undefined, can't add the class....

fbas

I was able to get your code working just fine. (just had to add my own data, since you didn't provide it in your example above..)

[code]


fnRowCallback DNDlist



<!--
$(document).ready(function() {
$('#DNDList').dataTable( {

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnRowCallback": function(nRow, aData )
{
var i = 0; // index for counting columns, to target 6th column for change
switch (aData[6]) {
case "ACTIVE":
$('td', nRow).each(function() {
if (i==6 && !$(this).hasClass('active')) { $(this).addClass("active") ; }
i++;
});
break;
case "EXPIRED":
$('td', nRow).each(function() {
if (i==6 && !$(this).hasClass('expired')) { $(this).addClass("expired") ; }
i++;
});
break;
case "EXPECTED TODAY":
$('td', nRow).each(function() {
if (i==6 && !$(this).hasClass('expected_today')) { $(this).addClass("expected_today") ; }
i++;
});
break;
}
return nRow;
},
"aoColumns":
[
{'sTitle':'ID'},
{'sTitle':'Title'},
{'sTitle':'Ent'},
{'sTitle':'Contract'},
{'sTitle':'CreatedOn'},
{'sTitle':'Expires'},
{'sTitle':'Status'},
]


});
});
// -->



<!--
.active { background-color: mistyrose }
.expired { background-color: lightgrey }
.expected_today { background-color: yellow }
-->






?
?
?
?
?
?
status



1
a
 
 
 
 
ACTIVE


2
b
 
 
 
 
EXPIRED


3
c
 
 
 
 
EXPECTED TODAY


4
d
 
 
 
 
ACTIVE


5
e
 
 
 
 
EXPIRED






[/code]

however, I think you're better off using fnRender for this purpose (http://www.datatables.net/usage/columns)

sjslall

At last got it working, found how to do it:
1. when using the mDataProp feature of aoColumn, we need to reference the iD being associated.
So as per my code, the ID associated was {"mDataProp"="Status"), so the fnRowCallback: if 'Status'=="Active" { div.addClass("xxx")

And this works fine.

The data is being pulled from sharepoint lists

jam

Oh.....Thank you!!!!!!!
I solved the problem!!!!!!!!!!! I got a hint from you.
wooooooowwww T.T

the ID associated was {"mDataProp"="Status"),
"fnRowCallback": function( nRow, aData ) {
if ( aData.Status== "Active" ){
nRow.className = "XXX";
}
return nRow;
}

I am so happy for this is :-)
Thank you very very very very much. ^ㅅ^