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++;  
}

你能告诉我如何在插入 OR 之后如何选择新行的第二个单元格？如何在插入之前/期间设置行的样式？

非常感谢任何帮助！

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" }  
    ]   } );

你如何在JQuery.DataTable中更改单元格的样式？

5 个答案: