Wie ändern Sie den Stil der Zelle in einer JQuery.DataTable?

Question

Ich habe eine Frage zum Festlegen der Stilattribute für eine Datenzelle in jQuery.DataTable. Ich war in der Lage, die Breite für jede Spalte zu setzen, wenn die dataTable mit dem folgenden Code initialisiert:

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

Jetzt mag ich die Ausrichtung für die zweite Spalte ändern, etwa so: style="text-align: right;".

Ich füge Zeilen dynamisch mit diesem Code:

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

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

    giCount++; 
} 

Können Sie mir sagen, wie kann ich die zweite Zelle der neuen Zeile auswählen, nachdem es ODER eingefügt worden ist, wie der Stil der Reihe zu setzen vor/während der Insertion?

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Cool, ich freue mich berichten zu können, dass ich meine eigene Frage beantworten konnte! Ich definiert nur einen CSS-Stil (Alignright) und hinzugefügt, um den Stil auf die Säule etwa so:

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

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

Answer 2

Sie auch so etwas auf eine andere Art von Anpassungen verwenden können: innerhalb fnRender Sie Etikett, spanne einfügen können, und setzen Klasse oder Art des Elements innerhalb dieses "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

Dies ist der Code, der für mich gearbeitet:

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

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

Answer 5

Schnell und einfach wäre es, eine nth-child Klasse für die Tabelle hinzuzufügen. Also in Ihrem Fall:

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