Pintar celda datatable

publicado por: Anonymous

Necesito ayuda, en el sistema de información en el que estoy trabajando para listar la información de los cumpleaños de los trabajadores uso Datatable pero necesito pintar las celdas (Los días que que faltan para cumplir años) de el color respectivo osea:

  1. Si es menor o igual a 2 días (Rojo)
  2. Si es menor o igual a 10 días (Naranja)
  3. Si es menor o igual a 20 días (Azul)
  4. El resto osea mayor a 20 días de color (Verde)

Pero no he podido ya que soy nuevo en esto de la programación me seria de gran ayuda que alguien me respondiera. Gracias!!

_x000D_

_x000D_

$(document).ready(function (){_x000D_
listarCumpleanos();_x000D_
});_x000D_
_x000D_
function listarCumpleanos(){_x000D_
var tablaModalCumpleaños=$("#tablaModalCumpleaños").DataTable({_x000D_
_x000D_
	// Verde: #90EE90_x000D_
		// Rojo: #E60026_x000D_
		// Naranja: #E65F00_x000D_
		// Azul: #ADD8E6_x000D_
_x000D_
		rowCallback:function(row,data){_x000D_
			if(data[5] <= 2){_x000D_
				$($(row).find("td")[5]).css("background-color","#E60026");_x000D_
			}_x000D_
			else if(data[5] <= 10){_x000D_
				$($(row).find("td")[5]).css("background-color","#E65F00");_x000D_
			}_x000D_
			else if(data[5] <= 20){_x000D_
				$($(row).find("td")[5]).css("background-color","#ADD8E6");_x000D_
			}_x000D_
			else{_x000D_
				$($(row).find("td")[5]).css("background-color","#E60026");_x000D_
			}_x000D_
		},_x000D_
_x000D_
_x000D_
		destroy: true,_x000D_
		order: [[ 5, "asc" ]],_x000D_
		columnDefs: [{"className": "dt-center", "targets": "_all"}],_x000D_
	});_x000D_
}_x000D_
_x000D_
 

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<script src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>_x000D_
_x000D_
_x000D_
<table id='tablaModalCumpleaños' class='tablaModalCumpleaños display' cellspacing='0'>_x000D_
					<thead>_x000D_
						<tr>_x000D_
							<th>IDENTIFICACIÓN</th>_x000D_
							<th>NOMBRES</th>_x000D_
							<th>APELLIDOS</th>_x000D_
							<th style="width: 10%;">FECHA INICIO</th>_x000D_
							<th style="width: 10%;">FECHA FIN</th>_x000D_
							<th>DÍAS</th>_x000D_
							<th>COLEGIO</th>_x000D_
						</tr>_x000D_
					</thead>_x000D_
					<tbody>_x000D_
						<tr>_x000D_
							<td>1107851551</td>_x000D_
							<td>ESTEBAN</td>_x000D_
							<td>PAZ</td>_x000D_
							<td>2018-04-01</td>_x000D_
							<td>2018-04-05</td>_x000D_
							<td>2</td>_x000D_
							<td>COLEGIO LA ASUNCION</td>_x000D_
						</tr>_x000D_
_x000D_
						<tr>_x000D_
							<td>114555551</td>_x000D_
							<td>DANIEL</td>_x000D_
							<td>PAZ</td>_x000D_
							<td>2019-04-01</td>_x000D_
							<td>2020-04-05</td>_x000D_
							<td>10</td>_x000D_
							<td>COLEGIO SIH SEDE INVICALI</td>_x000D_
						</tr>_x000D_
_x000D_
_x000D_
						<tr>_x000D_
							<td>114555551</td>_x000D_
							<td>ALEJANDRO</td>_x000D_
							<td>RAMIREZ</td>_x000D_
							<td>2016-04-01</td>_x000D_
							<td>2020-04-05</td>_x000D_
							<td>20</td>_x000D_
							<td>COLEGIO SIH SEDE ALFONSO LOPEZ</td>_x000D_
						</tr>_x000D_
_x000D_
_x000D_
						<tr>_x000D_
							<td>114555551</td>_x000D_
							<td>CARLOS</td>_x000D_
							<td>GOMEZ</td>_x000D_
							<td>2017-04-01</td>_x000D_
							<td>2020-04-05</td>_x000D_
							<td>40</td>_x000D_
							<td>COLEGIO SIH SEDE ALFONSO LOPEZ</td>_x000D_
						</tr>_x000D_
					</tbody>_x000D_
					<tfoot>_x000D_
						<tr>_x000D_
							<th>IDENTIFICACIÓN</th>_x000D_
							<th>NOMBRES</th>_x000D_
							<th>APELLIDOS</th>_x000D_
							<th style="width: 10%;">FECHA INICIO</th>_x000D_
							<th style="width: 10%;">FECHA FIN</th>_x000D_
							<th>DÍAS</th>_x000D_
							<th>COLEGIO</th>_x000D_
						</tr>_x000D_
					</tfoot>_x000D_
				</table>

_x000D_

_x000D_

_x000D_

solución

La sitanxsis para agregar colores está correcta, no entiendo muy bien pero en ocaciones no lo hace. Intenta con retorna una función.

$($(row).find("td")[5]).css("background-color", function( index ) {
  return "E60026";
});

Sí aun sigue sin funcionar, define los colores en una hoja de estilo y agrega su respectiva clase.

// Verde: #90EE90
        // Rojo: #E60026
        // Naranja: #E65F00
        // Azul: #ADD8E6
$($(row).find("td")[5]).addClass("Verde");
Respondido por: Anonymous

Leave a Reply

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