Comment changer le style de la cellule dans un JQuery.DataTable?
j'ai une question sur la définition des attributs de style pour une cellule de données dans le jQuery.DataTable. J'ai pu définir la largeur de chaque colonne en initialisant le dataTable utilisant le code suivant:
oTable = $('#example').dataTable( {
"aoColumns" : [
{ sWidth: '40%' },
{ sWidth: '60%' }
]
} );
maintenant je veux changer l'alignement pour la deuxième colonne comme suit:style="text-align: right;".
j'ajoute des lignes dynamiquement en utilisant ce code:
/* Global var for counter */
var giCount = 2;
function fnClickAddRow() {
oTable.fnAddData( [
'col_1',
'col_2' ] );
giCount++;
}
Pouvez-vous me dire comment puis-je sélectionner la deuxième cellule de la nouvelle ligne après qu'il a été inséré OR comment définir le style de la rangée avant/pendant l'insertion?
Toute aide serait grandement appréciée!
5 réponses
Cool, je suis heureuse de vous annoncer que j'ai été en mesure de répondre à ma propre question! J'ai donc défini une feuille de style CSS (alignRight), et ajouté le style de la colonne comme suit:
<style media="all" type="text/css">
.alignRight { text-align: right; }
</style>
oTable = $('#example').dataTable( {
"aoColumns" : [
{ sWidth: '40%' },
{ sWidth: '60%', sClass: "alignRight" }
] } );
vous pouvez également utiliser quelque chose comme ça à un autre type de personnalisations : a l'intérieur de fnRender vous pouvez insérer l'étiquette, la portée, et définir la classe ou le style de l'élément à l'intérieur de ce "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>";
}
},
moyen facile et Rapide serait d'ajouter un nth-child classe pour la table. Alors dans votre cas:
#example td:nth-child(2) {
text-align: right;
}
voici le code qui a fonctionné pour moi:
<style>
#tableExample .classDataTable { font-size: 20px; }
</style>
oTable = $('#tableExample').dataTable( {
"aoColumns" : [
{ sWidth: '40%' },
{ sClass: "classDataTable" }
] } );