Как вы меняете стиль ячейки в JQuery.DataTable?

Question

У меня есть вопрос об установке атрибутов стиля для ячейки данных в jQuery.DataTable. Я смог установить ширину для каждого столбца при инициализации dataTable, используя следующий код:

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

Теперь я хочу изменить выравнивание для второго столбца следующим образом: style="text-align: right;".

Я добавляю строки динамически, используя этот код:

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

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

    giCount++;  
}

Можете ли вы сказать мне, как я могу выбрать вторую ячейку новой строки после ее вставки ИЛИ как установить стиль строки до / во время вставки?

Любая помощь будет принята с благодарностью!

Answer 1

Круто, я рад сообщить, что смог ответить на свой вопрос! Я только что определил стиль CSS (alignRight) и добавил стиль к столбцу так:

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

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

Answer 2

вы также можете использовать что-то подобное для другой настройки: внутри fnRender вы можете вставить метку, диапазон и установить класс или стиль элемента внутри этого "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

Быстрый и простой способ - добавить класс nth-child для таблицы. Итак, в вашем случае:

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

Answer 5

Это код, который работал для меня:

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

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