Estoy usando DataTable para crear una tabla interactiva. Tengo 9 columnas, 5 de los cuales son valores. Quiero cambiar el color de fondo de cada celda según su específica.

He empezado tratando de cambiar toda la fila de color, primero como esto parecía una tarea fácil. Sin embargo, yo no puede conseguir nada a cambio.

Mi código es el siguiente:

    <head>  
    <link  type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>      

    <script>
        $(document).ready(function(){
            $('#countryTable').DataTable();
        });
    </script>

    <script>
        $(document).ready( function () {
        $('#countryTable ').DataTable({
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[3] > 11.7 )
                {
                    $(nRow).css('color', 'red')
                }
                else if ( aData[2] == "4" )
                {
                    $(nRow).css('color', 'green')
                }
            }
        });
    </script>

</head>

<body>      

    <table id ="countryTable" class="display" cellspacing="0" data-page-length='193'>
<thead>
    <tr>
        <th>Rank</th>
        <th>Country</th>
        <th>Code</th>
        <th>Total</th>
        <th>Beer</th>
        <th>Wine</th>
        <th>Spirits</th>
        <th>Other</th>
        <th>Score</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Estonia</td>
        <td>EE</td>
        <td>14.97</td>
        <td>5.87</td>
        <td>1.65</td>
        <td>5.64</td>
        <td>1.81</td>
        <td>3 - Medium Risky</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Belarus</td>
        <td>BY</td>
        <td>14.44</td>
        <td>2.5</td>
        <td>0.75</td>
        <td>6.73</td>
        <td>4.46</td>
        <td>4 - Very Risky</td>
    </tr>

</tbody>

También he probado a utilizar la siguiente función pero sin suerte.
Si alguien pudiera ayudar sería muy appriciataed como yo soy muy de java script.

$(document).ready( function () {
        $('#countryTable').DataTable({
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[3] == "5" )
                {
                    $('td', nRow).css('background-color', 'Red');
                }
                else if ( aData[3] == "4" )
                {
                    $('td', nRow).css('background-color', 'Orange');
                }
            }
        });
Trate de ver este datatables.net/release-datatables/examples/advanced_init/…
El uso de 1.10 función específica cuando usted está utilizando DataTable de inicialización

OriginalEl autor Amy | 2016-12-09

1 Comentario

  1. 28

    Primero de todo, inicializar DataTable sólo una vez. A continuación, como por su pregunta, use rowCallback y no fnRowCallBack como se muestra a continuación:

    var oTable = $('#countryTable').DataTable({ 
        'rowCallback': function(row, data, index){
        if(data[3]> 11.7){
            $(row).find('td:eq(3)').css('color', 'red');
        }
        if(data[2].toUpperCase() == 'EE'){
            $(row).find('td:eq(2)').css('color', 'blue');
        }
      }
    });
    

    Aquí un el violín

    Gracias por volver a mí. He intentado usar el código anterior, pero todavía no está funcionando para mí. Donde puedo insertar? Agrego que en la siguiente? <script> $(document).ready(function(){ $(‘#countryTable’).DataTable(); }); </script> lo Siento Si parece básicos soy muy nuevo en esto.
    Le sugiero que lea los ejemplos y la documentación de aquí. Esto le permitirá obtener una bodega de la sintaxis y el funcionamiento básico. Un paso a la vez. Compruebe el violín y la relacionan con otros ejemplos.
    Gracias a ese vínculo que realmente ayudó. Me estaba poniendo el código en el lugar equivocado. Realmente aprecio su ayuda!
    Bravo! He implementado y sólo hay que poner la cantidad mínima para las tiendas de ingresos. De datos está cambiando y me gustaría cambiar de color para los diez primeros números, es posible? ¿Cómo puedo seleccionar solo 10(el más alto) los números en una tabla?
    Lo siento, no he trabajado lo suficiente con tablas de datos para responder a eso. Yo creo que usted debe preguntar que como una pregunta nueva.

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here