web-dev-qa-db-ja.com

セル値DataTableに基づいて行の背景色を変更する

DataTableプラグインを使用していくつかのレコードを表示しています。名前、日付、金額の3つの行があります。行の背景色を、金額列の特定の値に基づいて変更したい。

これは私のコードです：

<script type="text/javascript" charset="utf-8">
    $(document).ready( function () {
        var table = $('#tid_css').DataTable({
            'iDisplayLength': 100,
            "bFilter": false,
            "aaSorting" : [[2, "desc"]]
        });
    } );
</script>

テストとして、上記のコードと一緒に以下のコードを追加しましたが、「DataTables warning：table id = tid_css-再初期化できませんDataTable "

<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#tid_css').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            if ( aData[2] == "1" )
            {
                $('td:eq(2)', nRow).html( '<b>1</b>' );
            }
        }
    } );
} );
</script>

「fnRowCallback」を使用して、量が1の場合、色が赤、2 =青、3 =青などのさまざまな条件でこれを簡単に行うことができます。

jquerydatatable
27
Chelseawillrecover

OKこれを自分で解決できました。

$(document).ready( function () {
            $('#tid_css').DataTable({
                "iDisplayLength": 100,
                "bFilter": false,
                "aaSorting" : [[2, "desc"]],
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    if ( aData[2] == "5" )
                    {
                        $('td', nRow).css('background-color', 'Red');
                    }
                    else if ( aData[2] == "4" )
                    {
                        $('td', nRow).css('background-color', 'Orange');
                    }
                }
            });
})
53
Chelseawillrecover

DataTables 1.10+以降の同等の構文は rowCallback です

_"rowCallback": function( row, data, index ) {
    if ( data[2] == "5" )
    {
        $('td', row).css('background-color', 'Red');
    }
    else if ( data[2] == "4" )
    {
        $('td', row).css('background-color', 'Orange');
    }
}
_

前の回答の1つはcreatedRowに言及しています。それはいくつかの条件下で同様の結果を与えるかもしれませんが、それは同じではありません。たとえば、行のデータを更新した後にdraw()を使用すると、createdRowは実行されません。一度だけ実行されます。 rowCallbackが再び実行されます。

25
devlin carnate

DataTablesには、v 1.10以降の機能があります

https://datatables.net/reference/option/createdRow

例：

        $('#tid_css').DataTable({
            // ...
            "createdRow": function( row, data, dataIndex ) {
                if ( data["column_index"] == "column_value" ) {
                    $( row ).css( "background-color", "Orange" );
                    $( row ).addClass( "warning" );
                }
            },
            // ...
        });
9
gArn

Datatables v1.10.18以降では、インデックスの代わりに列キーを指定する必要があり、次のようになります。

rowCallback: function(row, data, index){
            if(data["column_key"] == "ValueHere"){
                $('td', row).css('background-color', 'blue');
            }
        }
7
Norielle Cruz

CreatedRow関数を使用して問題を解決しました

    $('#result1').DataTable( {
        data: data['firstQuery'],
        columns: [
                        { title: 'Shipping Agent Code' },
                        { title: 'City' },
                        { title: 'Delivery Zone' },
                        { title: 'Total Slots Open ' },
                        { title: 'Slots Utilized' },
                        { title: 'Utilization %' },

                    ],
                    "columnDefs": [
                        {"className": "dt-center", "targets": "_all"}
                      ],
                      "createdRow": function( row, data, dataIndex){
                            if( data[5] >= 90  ){
                                $(row).css('background-color', '#F39B9B');
                            }
                            else if( data[5] <= 70  ){
                                $(row).css('background-color', '#A497E5');
                            }
                            else{
                                $(row).css('background-color', '#9EF395');
                            }

                        }
                } );
3
Arpit Singh

RowCallBack datatableプロパティを使用して、正常に動作しています。 PFB：-

"rowCallback": function (row, data, index) {

                        if ((data[colmindx] == 'colm_value')) { 
                            $(row).addClass('OwnClassName');
                        }
                        else if ((data[colmindx] == 'colm_value')) {
                                $(row).addClass('OwnClassStyle');
                            }
                    }
1
satya prakash