Come si modifica lo stile della cella in un JQuery.DataTable?

Question

Ho una domanda sull'impostazione degli attributi di stile per una cella di dati nello jQuery.DataTable. Sono stato in grado di impostare la larghezza per ogni colonna durante l'inizializzazione del dataTable utilizzando il seguente codice:

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

Ora voglio cambiare l'allineamento per la seconda colonna in questo modo: style="text-align: right;".

sto aggiungendo le righe in modo dinamico utilizzando questo codice:

/* Global var for counter */ 
var giCount = 2; 

function fnClickAddRow() { 
    oTable.fnAddData([ 
     'col_1', 
     'col_2' ]); 

    giCount++; 
} 

Potete dirmi come posso selezionare la seconda cella della nuova riga dopo che è stato inserito O come impostare lo stile della riga prima/durante l'inserimento?

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Cool, sono felice di riferire che sono stato in grado di rispondere alla mia stessa domanda! Ho appena definito uno stile CSS (AlignRight), e ha aggiunto lo stile alla colonna in questo modo:

<style media="all" type="text/css"> 
    .alignRight { text-align: right; } 
</style> 

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

Answer 2

è anche possibile usare qualcosa di simile a un altro tipo di personalizzazioni: all'interno fnRender è possibile inserire l'etichetta, arco, e impostare classe o stile dell'elemento all'interno di questa "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 3

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

Answer 4

questo è il codice che ha funzionato per me:

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

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

Answer 5

Un modo semplice e rapido sarebbe aggiungere una classe nth-child per la tabella. Quindi nel tuo caso:

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