Odd behavior with fnInitComplete

drewhjava

[code]
var pkgLineTable = $('#pkgLineTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"aoColumns": [

{
"mDataProp": "treeName"
},
{
"mDataProp": "shortname"
},
{
"mDataProp": "description"
},
{
"mDataProp": "lineStatus"
}
],
"sAjaxSource": '/json/pkgLineList',
"fnInitComplete": function() {
var nodes = pkgLineTable.fnGetNodes();
var lineStatus;
for (var i = 0; i < nodes.length; i++) {
lineStatus = pkgLineTable.fnGetData(nodes[i]);
nodes[i].setAttribute("style", "background: " + lineStatus.rowColor);
}
}
});
[/code]

If I do this all my table rows are colored correctly.

[code]
"fnInitComplete": function() {
var nodes = pkgLineTable.fnGetNodes();
var lineStatus;
for (var i = 0; i < nodes.length; i++) {
lineStatus = pkgLineTable.fnGetData(nodes[i]);
nodes[i].setAttribute("class", lineStatus.rowColor);
}
}
[/code]


If I do this and change rowColor property to be a class instead, it only colors the rows that are displayed at first. Nothing else is displayed after that if I page. Very odd.

I also saw that DT_RowClass was added to 1.8. Is that possible to use with mDataProps? My response looks like this.

[code]
{"aaData":[{"DT_RowClass":"rowGreen","pkgLineId":3074, etc....
[/code]

allan

Hi drewhjava,

DT_RowClass: Absolutely this should be possible. Your response looks fine - is it not being applied automatically? Is there any change you can link me to the page with that not working?

Regarding your setAttribute part - that actually looks fine to me as well (probably not what you want to hear...)! I would suggest rather than using setAttribute however, use $(nodes[i]).addClass( lineStatus.rowColor ); as that will retain any other classes such as odd/even.

Let me know how that goes for you!

Regards,
Allan

drewhjava

Hi Allan. No the DT_RowClass is not getting automatically applied. In your example on the website your not calling DT_RowClass as a key string like I am. Your response is like 1:"Test", 2:"Test2, DT_RowClass: "rowRed" . Mine is slightly different. I'm not sure what that issue is.

As far as the the $(node[i]).addClass(). That didn't seem to do anything. The first rows are not colored at all. Interestingly enough my other data table that uses server side processing works fine. Although I'm not calling the coloring in fInitComplete;

[code]
var reportTable = $(this).dataTable({

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"lfrp>t<"F"lip>',
"iDisplayLength": 15,
"aLengthMenu": [[10, 15, 20, 50, 100, 200, 500], [10, 15, 20, 50, 100, 200, 500]],
"aoColumns": [
{
"mDataProp": "timeStamp"
},
{
"mDataProp": "ounces"
},
{
"mDataProp": "revolutions"
},
{
"mDataProp": "benchmark"
},
{
"mDataProp": "palletCount"
},
{
"mDataProp": "rollChange"
},
{
"mDataProp": "breaksPallet"
},
],
"sAjaxSource": '/json/reportData/'+pkgLineId,
"fnDrawCallback": function() {
var nodes = reportTable.fnGetNodes();
var lineStatus;
for (var i = 0; i < nodes.length; i++) {
lineStatus = reportTable.fnGetData(nodes[i]);
nodes[i].setAttribute("class", lineStatus.rowColor);
}
}
});

[/code]

This is my css.

[code]

.rowRed {
background: #ffdddd;
}

.rowLightRed {
background: #ffeeee;
}

.rowYellow {
background: #FFFFE0;
}

.rowGreen {
background: #ddffdd;
}

[/code]

But yea, this is working fine on my server side processing.

Also note that this works also.

$(nodes[i]).css("background", "yellow");

addClass is not throwing any errors. Just not working.

allan

So when you aren't using server-side processing, is it still using Ajax source? And that works with DT_RowClass does it? both Ajax source and server-side processing go through the same code path at that point in DataTables so the behaviour of each should be exactly the same.

If you add 'console.log( lineStatus.rowColor ); ' to your inner loop for the nodes, does that print out the colours as expected on the console?

Allan

drewhjava

Yes console.log prints out row color fine. I've actually just tried doing setAttribute("class", "rowRed"); just to make sure it wasn't anything to do with the variable. I get the same results. And yes I'm using an ajax source on this table but I'm not using server side processing. I'm not using DT_RowClass anywhere. I was just trying it here to see if I could get it to work.

If this may help this is my json response. This response is small though so it doesn't use any pagination. The coloring problem comes from pagination.

[code]
{"aaData":[{"rowColor":"rowLightRed","pkgLineId":17358,"treeName":"Jacksonville","shortname":"Line 1 - 2 Liter","description":"","lineStatus":"Very Low Revolutions"},{"rowColor":"inherit","pkgLineId":17357,"treeName":"Jacksonville","shortname":"Line 2 - Dasani","description":"","lineStatus":"High Revolutions"},{"rowColor":"rowGreen","pkgLineId":17356,"treeName":"Jacksonville","shortname":"Line 3 - Cans","description":"","lineStatus":"OK"},{"rowColor":"rowLightRed","pkgLineId":17879,"treeName":"Broken Arrow","shortname":"Line 1 / Paragon Films","description":"","lineStatus":"Very High Revolutions"},{"rowColor":"rowLightRed","pkgLineId":17879,"treeName":"Broken","shortname":"Line 1 / Films","description":"","lineStatus":"Very High Revolutions"}]}
[/code]

allan

I see - so can you include DT_RowClass easily enough in your JSON output? If so - does that work okay? Can you give me a link to the page showing what is happening please?

Thanks,
Allan

drewhjava

Hey Allan I've tried including DT_RowClass in my response and it's not doing anything as far as coloring goes.

http://jsfiddle.net/Ne29L/8/

Here is the JSFiddle page. I'm behind a company firewall right now and I can't open it for this. the jsfiddle page isn't working correctly. I think it's dying on the fnGetNodes() function. I'm sure if you copy and pasted it and ran it, it would be fine. If you could do that it would be great.

allan

http://jsfiddle.net/jZvqe/ - that's it without the fnInitComplete function and DT_RowClass included. As you can see in the rendered table the class is applied to the row (you'll need to use Firebug or similar to see the class). The reason that the row colour isn't being applied here from your custom CSS is that my demo CSS appears to be getting a higher priority. You could add !important to your CSS or just remove my demo ones.

Allan

drewhjava

Ok cool. I added !important and that fixed it. That was probably the problem the whole time with the addClass function. When I used Chrome to debug the javascript I noticed that the class was being applied but it didn't change anything. So I guess there's something different from the way I'm doing css with the server side table I posted. The DT_RowClalss seems to be a much better solution. Thanks a lot!

allan

Good to hear that did the job :-)

Regards,
Allan