web-dev-qa-db-ja.com

JQuery.DataTableのセルのスタイルをどのように変更しますか？

jQuery.DataTableのデータセルのスタイル属性の設定について質問があります。次のコードを使用して、dataTableを初期化するときに各列の幅を設定できました。

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

次に、2番目の列の配置をstyle="text-align: right;"のように変更します。

このコードを使用して動的に行を追加しています：

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

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

    giCount++;  
}

新しい行が挿入された後、新しい行の2番目のセルを選択する方法を教えてください[〜＃〜] or [〜＃〜]挿入前/挿入中に行のスタイルを設定する方法

どんな助けも大歓迎です！

jquery-pluginsdatatablejquery-selectors
29
Sephrial

クール、私は自分の質問に答えることができたことを報告できてうれしいです！ CSSスタイル（alignRight）を定義し、次のようにスタイルを列に追加しました。

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

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

別の種類のカスタマイズにそのようなものを使用することもできます：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>";
                        }                   
                    },
10
Rbacarin
$('#tblAssignment tr td:nth-child(1)').addClass('rightaligned');
8
deep

すばやく簡単な方法は、nth-childテーブルのクラス。あなたの場合：

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

これは私のために働いたコードです：

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

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