Change the color of the rows according to the data obtained from the server

mldgato

Hello I am trying to change the color of my rows according to the data obtained from the server but I can not change them, I am using the createdRow function but the table still does not change its rows, the code I am using is the following:

var LosCuadros = $('#'+text).DataTable(
{
    "language":
    {
        "url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Spanish.json"
    },
    "ajax" :
    {
        "url" :  "mostrarCuadros.php",
        "type" : "POST",
        "data" : function(d)
        {
            d.IdCiclo = $('#IdCiclo').val();
            d.IdNivel = $('#IdNivel').val();
            d.IdGrado = $('#IdGrado').val();
            d.IdSeccion = $('#IdSeccion').val();
            d.IdUnidad = $('#IdUnidad').val();
        }
    },
    "createdRow": function( row, data, dataIndex )
    {
        if ( data[1] == 0 )
        {        
            $(row).addClass('bg-warning');
        }
    },
    "pageLength": 20,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": false,
    "bAutoWidth": true,
    "columns":
    [
        {"data": "IdCuadro"},
        {"data": "Estado"},
        {"data": "Materia"},
        {"data": "Apellidos"},
        {"data": "Nombres"},
        {"data": "Estado"},
    ],
    "order": [[ 1, "desc" ]],
    "columnDefs":
    [
        {
            "targets": [1],
                render : function (data, type, row)
                {
                    switch(data)
                    {
                        case '0' : return '<span class="text-warning">Sin guardar</span>'; break;
                        case '1' : return '<span class="text-danger">Por Aprobar</span>'; break;
                        case '2' : return '<span class="text-warning">No Creado</span>'; break;
                        case '3' : return '<span class="text-success">Aprobado</span>'; break;
                    }
                }
        },
        {
            "targets": [5],
                render : function (data, type, row)
                {
                    switch(data)
                    {
                        case '0' : return '<span class="text-warning">Sin guardar</span>'; break;
                        case '1' : return '<button id="AbrirElCuadro" class="btn btn-success btn-xs">Abrir  <i class="fa fa-folder-open" aria-hidden="true"></i></button>'; break;
                        case '2' : return '<span class="text-warning">No Creado</span>'; break;
                        case '3' : return '<button id="AbrirElCuadro" class="btn btn-success btn-xs">Abrir  <i class="fa fa-folder-open" aria-hidden="true"></i></button>'; break;
                    }
                }
        }
    ]
});

On line number 20 I use the createdRow function, but the rows do not change color in the table, thank you very much.

kthorngren

Since you are using objects, not arrays, you will probably want to change if ( data[1] == 0 ) to if ( data.Estado == 0 ).

Kevin

mldgato

Thanks, now is working.