How do you change the style of cell in a JQuery.DataTable?

Question

I have a question about setting the style attributes for a data cell in the jQuery.DataTable. I was able to set the width for each column when initializing the dataTable using the following code:

oTable = $('#example').dataTable( {     "aoColumns" : [          { sWidth: '40%' },          { sWidth: '60%' }     ] } ); 

Now I want to change the alignment for the second column like so: style="text-align: right;".

I am adding rows dynamically using this code:

/* Global var for counter */ var giCount = 2;  function fnClickAddRow() {     oTable.fnAddData( [         'col_1',          'col_2' ] );      giCount++;   } 

Can you tell me how can I select the second cell of the new row after it's been inserted OR how to set the style of the row before/during insertion?

Any help would be greatly appreciated!

Answer 1

Cool, I am happy to report that I was able to answer my own question! I just defined a CSS style (alignRight), and added the style to the column like so:

<style media="all" type="text/css">     .alignRight { text-align: right; } </style>  oTable = $('#example').dataTable( {       "aoColumns" : [            { sWidth: '40%' },            { sWidth: '60%', sClass: "alignRight" }       ]   } ); 

Answer 2

you can also use something like that to another kind of customizations : inside fnRender you can insert label, span, and set class or style of the element inside this "td"

"aoColumns": [                     { "sTitle": "Ativo","sClass": "center","bSearchable": true,                         "fnRender": function(obj) {                             var sReturn = obj.aData[ obj.iDataColumn ];                             return "<a href=\"/"+sReturn.toLowerCase()+"\" class=\"tag\">/"+sReturn.toLowerCase()+"</a>";                         }                                        },