Cambiar color de las filas después de imprimir Datatables

publicado por: Anonymous

He realizado un sistema de mensajes entre los usuarios muy básico, y saco en un datatable el informe de todos los mensajes enviados. El caso es que quiero que en el datatable cuando el mensaje no este leído salga en un color rojo por ejemplo y cuando este leído lo ponga en verde.

He probado así:

<html>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
<style>
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    },
    th { white-space: nowrap; },
    td.details-control {
        background: url('../iconos/abrirdetalles.png') no-repeat center center;
        cursor: pointer;
    }
    tr.details td.details-control {
        background: url('../iconos/cerrardetalles.png') no-repeat center center;
    }
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    },
    th { white-space: nowrap; }
    table.dataTable thead th{
        font-size: 14px;
        padding: 4px;
    }
    table.dataTable.display tbody td {
        padding: 2px;
        font-size: 12px;
        text-align: center;
    }
    table.dataTable.display tbody tr.group td{
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        padding: 4px;
    }
    .highlight {
        background-color: black;
        color: white;
    }
</style>
</html>
<?php

require_once('../Conection.php');

$conection = Conection::getConection();
mysqli_query($conection,"SET NAMES 'utf8'");
$mensajes=[];
$query="SELECT m.id as CodMensaje,m.Fecha as Fecha,m.autor as Autor,m.destinatario as Destinatario,m.mensaje as Mensaje,t.Nombre as tNombre,m.estado as Estado  FROM mensajes m INNER JOIN trabajadores t ON Codigotrab=autor";
$result = mysqli_query($conection, $query);
while($row = mysqli_fetch_assoc($result)) {
    $mensajes[]=array(
        "CodMensaje"=>$row['CodMensaje'],
        "Fecha"=>$row['Fecha'],
        "Autor"=>$row['Autor'],
        "Destinatario"=>$row['Destinatario'],
        "Mensaje"=>$row['Mensaje'],
        "tNombre"=>$row['tNombre'],
        "Estado"=>$row['Estado']
    );
}
json_encode($mensajes);
echo "<h1>REGISTRO DE MENSAJES ENVIADOS</h1>";
echo "<table id='mensajes' class='display' style='width: 100%'>
        <thead>
            <tr>
                <th>AUTOR</th>
                <th>DESTINATARIO</th>
                <th>FECHA</th>
                <th>MENSAJE</th>
                <th>OPCIONES</th>
            </tr>
        </thead><tbody>";
if(!empty($mensajes)) {
    foreach ($mensajes as $i) {  //Iteramos tu objeto
        $tds = ""; //Inicmaos variable tds
        $tds .= "<td>" .$i['tNombre']." - ".$i['Autor']. "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
        $destinatario=$i['Destinatario'];
        $query="SELECT Nombre FROM trabajadores WHERE Codigotrab='$destinatario'";
        $result = mysqli_query($conection, $query);
        $destinatarionombre=mysqli_fetch_row($result)[0];
        $tds .= "<td>" . $i['Destinatario'] ." - ".$destinatarionombre. "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
        $tds .= "<td>" . date('d-m-Y H:i',strtotime($i['Fecha'])) . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
        $tds .= "<td>" . $i['Mensaje'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
        $codigo=$i['CodMensaje'];
        $tds .= "<td>" ."<span valor=$codigo><img class='borrable' src='../img/borrar.png'>". "</span></td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
        if ($i['Estado']==0){
            echo "<tr bgcolor='#f08080'>" . $tds . "</tr>"; // Imprimimos el resultado final
        }
        else{
            echo "<tr bgcolor='#90ee90'>" . $tds . "</tr>"; // Imprimimos el resultado final
        }

    }
}
?>
</tbody>

</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

<script src="../js/tablemensajes.js"></script>

Y el js del datatables:

$(document).ready(function() {
    var groupColumn = 0;
    var table = $('#mensajes').DataTable({
        "processing": true,
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
                    last = group;
                }
            } );
        },
        dom: 'Bfrtip',
        buttons: [
            {extend:'print',text: "Imprimir",title: "Registro de Llamadas",footer:true },
            {extend:'excel',text: "Exportar Excel",title: "Registro de Llamadas",footer:true },
            {extend:'pdf',text: "Exportar PDF",title: "Registro de Llamadas",footer:true},
            {extend:'copy',text: "Copiar portapapeles",title: "Registro de Llamadas",footer:true}
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
        }
    } );
    // Order by the grouping
    $('#mensajes tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
            table.order( [ groupColumn, 'desc' ] ).draw();
        }
        else {
            table.order( [ groupColumn, 'asc' ] ).draw();
        }
    } );
    $('.borrable').on('click',function () {
        if(confirm("Desea borrar este mensaje?")) {
            id = $(this).parent().attr("valor");
            $.ajax({
                type: "POST",
                url: "../ajax/borrados/mensajes.php",
                data: {id: id},
            });
            $(this).parent().parent().parent().remove()
        }
    });
} );

El caso es que yo le doy este formato pero cuando llega y ejecuta el .datatable pues le aplica sus propios formatos.

¿Alguien que entienda mas me puede ayudar? Gracias.

solución

Para esto se pueden tener estilos definidos, y para que se apliquen a la tabla se pueden forzar agregando !important:

 .rojo{
    background-color: #f08080 !important;
 }
 .verde{
    background-color: #90ee90 !important;
 }

Luego en php se agregan esas clases al código de creación de las filas:

if ($i['Estado']==0){
   echo "<tr class='rojo'>" . $tds . "</tr>"; // Imprimimos el resultado final
}
else{
    echo "<tr class='verde'>" . $tds . "</tr>"; // Imprimimos el resultado final
}

Y de esa forma las filas ya tienen estilo.

Puedes probar el código funcionando:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
    var groupColumn = 0;_x000D_
    var table = $('#mensajes').DataTable({_x000D_
         "processing": true,_x000D_
        "columnDefs": [_x000D_
            { "visible": false, "targets": groupColumn }_x000D_
        ],_x000D_
        "order": [[ groupColumn, 'asc' ]],_x000D_
        "displayLength": 25,_x000D_
        "drawCallback": function ( settings ) {_x000D_
            var api = this.api();_x000D_
            var rows = api.rows( {page:'current'} ).nodes();_x000D_
            var last=null;_x000D_
_x000D_
            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {_x000D_
                if ( last !== group ) {_x000D_
                    $(rows).eq( i ).before(_x000D_
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'_x000D_
                    );_x000D_
                    last = group;_x000D_
                }_x000D_
            } );_x000D_
        },_x000D_
        dom: 'Bfrtip',_x000D_
        buttons: [_x000D_
            {extend:'print',text: "Imprimir",title: "Registro de Llamadas",footer:true },_x000D_
            {extend:'excel',text: "Exportar Excel",title: "Registro de Llamadas",footer:true },_x000D_
            {extend:'pdf',text: "Exportar PDF",title: "Registro de Llamadas",footer:true},_x000D_
            {extend:'copy',text: "Copiar portapapeles",title: "Registro de Llamadas",footer:true}_x000D_
        ],_x000D_
        "language": {_x000D_
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"_x000D_
        },_x000D_
        "footerCallback": function ( row, data, start, end, display ) {_x000D_
            var api = this.api(), data;_x000D_
_x000D_
            // Remove the formatting to get integer data for summation_x000D_
            var intVal = function ( i ) {_x000D_
                return typeof i === 'string' ?_x000D_
                    i.replace(/[$,]/g, '')*1 :_x000D_
                    typeof i === 'number' ?_x000D_
                        i : 0;_x000D_
            };_x000D_
        }_x000D_
        _x000D_
    } );_x000D_
    // Order by the grouping_x000D_
    $('#mensajes tbody').on( 'click', 'tr.group', function () {_x000D_
        var currentOrder = table.order()[0];_x000D_
        if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {_x000D_
            table.order( [ groupColumn, 'desc' ] ).draw();_x000D_
        }_x000D_
        else {_x000D_
            table.order( [ groupColumn, 'asc' ] ).draw();_x000D_
        }_x000D_
    } );_x000D_
    $('.borrable').on('click',function () {_x000D_
        if(confirm("Desea borrar este mensaje?")) {_x000D_
            id = $(this).parent().attr("valor");_x000D_
            $.ajax({_x000D_
                type: "POST",_x000D_
                url: "../ajax/borrados/mensajes.php",_x000D_
                data: {id: id},_x000D_
            });_x000D_
            $(this).parent().parent().parent().remove()_x000D_
        }_x000D_
    });_x000D_
    _x000D_
} _x000D_
_x000D_
_x000D_
_x000D_
);

_x000D_

tr.group,_x000D_
    tr.group:hover {_x000D_
        background-color: #ddd !important;_x000D_
    },_x000D_
    th { white-space: nowrap; },_x000D_
    td.details-control {_x000D_
        background: url('../iconos/abrirdetalles.png') no-repeat center center;_x000D_
        cursor: pointer;_x000D_
    }_x000D_
    tr.details td.details-control {_x000D_
        background: url('../iconos/cerrardetalles.png') no-repeat center center;_x000D_
    }_x000D_
    tr.group,_x000D_
    tr.group:hover {_x000D_
        background-color: #ddd !important;_x000D_
    },_x000D_
    th { white-space: nowrap; }_x000D_
    table.dataTable thead th{_x000D_
        font-size: 14px;_x000D_
        padding: 4px;_x000D_
    }_x000D_
    table.dataTable.display tbody td {_x000D_
        padding: 2px;_x000D_
        font-size: 12px;_x000D_
        text-align: center;_x000D_
    }_x000D_
    table.dataTable.display tbody tr.group td{_x000D_
        text-align: left;_x000D_
        font-size: 14px;_x000D_
        font-weight: bold;_x000D_
        padding: 4px;_x000D_
    }_x000D_
    .highlight {_x000D_
        background-color: black;_x000D_
        color: white;_x000D_
    }_x000D_
    .rojo{_x000D_
      background-color: #f08080 !important;_x000D_
    }_x000D_
    .verde{_x000D_
      background-color: #90ee90 !important;_x000D_
    }

_x000D_

<html>_x000D_
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">_x000D_
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">_x000D_
</html>_x000D_
<h1>REGISTRO DE MENSAJES ENVIADOS</h1>_x000D_
<table id='mensajes' class='display' style='width: 100%'>_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th>AUTOR</th>_x000D_
                <th>DESTINATARIO</th>_x000D_
                <th>FECHA</th>_x000D_
                <th>MENSAJE</th>_x000D_
                <th>OPCIONES</th>_x000D_
            </tr>_x000D_
        </thead>_x000D_
     <tbody>_x000D_
      <tr class='rojo'>_x000D_
        <td>tNombre -  Autor</td>   _x000D_
        <td>Destinatario - destinatarionombre</td>_x000D_
        <td>Fecha</td>_x000D_
        <td>Mensaje</td>_x000D_
        <td><span valor=$codigo><img class='borrable' src='../img/borrar.png'></span></td>_x000D_
      </tr>_x000D_
      <tr class='verde'>_x000D_
        <td>tNombre -  Autor</td>   _x000D_
        <td>Destinatario - destinatarionombre</td>_x000D_
        <td>Fecha</td>_x000D_
        <td>Mensaje</td>_x000D_
        <td><span valor=$codigo><img class='borrable' src='../img/borrar.png'></span></td>_x000D_
      </tr>_x000D_
     </tbody>_x000D_
</table>_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>_x000D_
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>_x000D_
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>_x000D_
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>_x000D_
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>_x000D_
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>_x000D_
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>_x000D_
<script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

_x000D_

_x000D_

_x000D_

Espero te sea de utilidad, saludos.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *