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

У меня возникает вопрос об установке атрибутов стиля для ячейки данных в 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++;  
}

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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