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

Answer 1

$('#tblAssignment tr td:nth-child(1)').addClass('rightaligned');

Answer 2

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 3

Quick and easy way would be to add an nth-child class for the table. So in your case:

#example td:nth-child(2) {
    text-align: right;
}

Answer 4

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>";
                        }                   
                    },

Answer 5

This is the code that worked for me:

<style>
    #tableExample .classDataTable { font-size: 20px; }
</style>

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