Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81689

background-color based on a cell value

$
0
0
Hi,

I'm new and very enthusiastic with this tool that I have just discovered.
I'm sorry for my spelling mistakes, I'm French and I'm learning English... Hope you can understand me !

I'm using DateTables (data sources : Javascript array) and I would like to color a cell based on its value. For an example : all the cells name "America" in the "Continent" row = backgroung-color:blue.

I have try to use the "fnRender" function but I only sucess to change the text (font-color). I failled to change the TD settings.

This is my code (a demographic table) :
			$(document).ready(function() {
				$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
				$('#example').dataTable( {
				    "aaSorting": [[1, "asc" ]],
					"aaData": aDataSet,
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",
					"aoColumns": [
						{ "sTitle": "#", "sClass": "right", "sWidth": "50px" },
						{ "sTitle": "Country", "sWidth": "300px" },
						{"sTitle": "Continent",
							"sClass": "center",
							"fnRender": function(obj) {
								var sReturn = obj.aData[ obj.iDataColumn ];
								if ( sReturn == "America" ) {
								     sReturn = "<td class='test'><b>America</b></td>";
								}
								return sReturn;
							}},
						{ "sTitle": "Data", "sClass": "center", "sWidth": "160px", "bSortable": false},
						{ "sTitle": "", "sClass": "left", "sWidth": "210px", "bSortable": false}
					]
				} );	
			} );

The class "test" refers to the css : td.test {background-color: blue;}.

--> It seems thant I can not change the td value with "fnRender", is not it ?. Anyone have an idea if it's possible ?

Thank you in advance,
Read you soon,
Alexis

Viewing all articles
Browse latest Browse all 81689

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>