如何更改 JQuery.DataTable 中单元格的样式?

Posted

技术标签:

【中文标题】如何更改 JQuery.DataTable 中单元格的样式?【英文标题】:How do you change the style of cell in a JQuery.DataTable? 【发布时间】:2011-02-16 13:40:44 【问题描述】:

我有一个关于为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"   
    ]    );

【讨论】:

奇怪的是,上面的代码只有在我还添加以下内容时才有效: "className": "dt-center", "aTargets": "_all" 这不应该是答案,问题是关于添加内联样式而不是添加类【参考方案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>";
                                           
                    ,

【讨论】:

【参考方案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"   
    ]    );

【讨论】:

以上是关于如何更改 JQuery.DataTable 中单元格的样式?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据值更改jquery dataTable中的行颜色

jquery datatable 通过oSetting更改sAjaxsource,如何重新获取数据

jquery datatable 如何获取隐藏列的值

jquery中的dataTable表格控件中如何插入超链接或者按钮?

JQuery Datatable - 将单个单元格拆分为多列以提高可读性?

引导模式中的 jQuery dataTable 溢出