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.