3

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.

1 respuesta 1

1

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:

$(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()
        }
    });
    
} 



);
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;
    }
    .rojo{
      background-color: #f08080 !important;
    }
    .verde{
      background-color: #90ee90 !important;
    }
<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">
</html>
<h1>REGISTRO DE MENSAJES ENVIADOS</h1>
<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>
      <tr class='rojo'>
        <td>tNombre -  Autor</td>   
        <td>Destinatario - destinatarionombre</td>
        <td>Fecha</td>
        <td>Mensaje</td>
        <td><span valor=$codigo><img class='borrable' src='../img/borrar.png'></span></td>
      </tr>
      <tr class='verde'>
        <td>tNombre -  Autor</td>   
        <td>Destinatario - destinatarionombre</td>
        <td>Fecha</td>
        <td>Mensaje</td>
        <td><span valor=$codigo><img class='borrable' src='../img/borrar.png'></span></td>
      </tr>
     </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>

Espero te sea de utilidad, saludos.

2
  • 1
    Que simple, no sabia que agregando una clase si que funcionaría.. muchísimas gracias!
    – KeTeMeTo
    Commented el 30 ago. 2019 a las 10:34
  • @KeTeMeTo de nada, que tengas buen día. Commented el 30 ago. 2019 a las 10:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.