web-dev-qa-db-fra.com

Modifier la couleur d'arrière-plan de la ligne en fonction de la valeur de la cellule DataTable

J'utilise le plugin DataTable pour afficher certains enregistrements. J'ai 3 lignes, Nom, Date, Montant. Je souhaite que la couleur d'arrière-plan de la ligne change en fonction de valeurs spécifiques dans la colonne des montants.

Ceci est mon code:

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

En guise de test, j’ai ajouté le code ci-dessous à côté du code ci-dessus, mais l’erreur "Avertissement DataTables: id de table = tid_css - Impossible de réinitialiser le 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>

Avec quelle facilité puis-je faire cela en utilisant "fnRowCallback" avec différentes conditions, comme si le montant est 1, la couleur est rouge, 2 = bleu, 3 = bleu, etc.

jquerydatatable
27
Chelseawillrecover

OK, j'ai pu résoudre ce problème moi-même:

$(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

La syntaxe équivalente depuis DataTables 1.10+ est 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');
    }
}

Une des réponses précédentes mentionne createdRow. Cela peut donner des résultats similaires dans certaines conditions, mais ce n'est pas la même chose. Par exemple, si vous utilisez draw() après la mise à jour des données d'une ligne, createdRow ne sera pas exécuté. Il ne fonctionne qu'une fois. rowCallback s'exécutera à nouveau.

25
devlin carnate

DataTables a des fonctionnalités pour cela depuis v 1.10

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

Exemple:

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

Depuis datatables v1.10.18, vous devriez spécifier la clé de colonne au lieu d'index, cela devrait ressembler à ceci:

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

J'ai utilisé createdRow Function et résolu mon problème

    $('#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

J'ai utilisé la propriété datatable rowCallBack qui fonctionne très bien. 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