web-dev-qa-db-fra.com

Comment changez-vous le style de 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 lors de l'initialisation de dataTable à l'aide du code suivant:

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

Maintenant, je veux changer l'alignement de 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 son insertion OU comment définir le style de la ligne avant/pendant l'insertion?

Toute aide serait grandement appréciée!

jquery-pluginsdatatablejquery-selectors
29
Sephrial

Cool, je suis heureux d'annoncer que j'ai pu répondre à ma propre question! Je viens de définir un style CSS (alignRight), et j'ai ajouté le style à la colonne comme ceci:

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

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

vous pouvez également utiliser quelque chose comme ça pour un autre type de personnalisations: à l'intérieur de fnRender, vous pouvez insérer une étiquette, une étendue 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>";
                        }                   
                    },
10
Rbacarin
$('#tblAssignment tr td:nth-child(1)').addClass('rightaligned');
8
deep

Un moyen rapide et facile serait d'ajouter un nth-child classe pour la table. Donc dans votre cas:

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

Voici le code qui a fonctionné pour moi:

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

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