-1

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!!

$(document).ready(function (){
listarCumpleanos();
});

function listarCumpleanos(){
var tablaModalCumpleaños=$("#tablaModalCumpleaños").DataTable({

	// Verde: #90EE90
		// Rojo: #E60026
		// Naranja: #E65F00
		// Azul: #ADD8E6

		rowCallback:function(row,data){
			if(data[5] <= 2){
				$($(row).find("td")[5]).css("background-color","#E60026");
			}
			else if(data[5] <= 10){
				$($(row).find("td")[5]).css("background-color","#E65F00");
			}
			else if(data[5] <= 20){
				$($(row).find("td")[5]).css("background-color","#ADD8E6");
			}
			else{
				$($(row).find("td")[5]).css("background-color","#E60026");
			}
		},


		destroy: true,
		order: [[ 5, "asc" ]],
		columnDefs: [{"className": "dt-center", "targets": "_all"}],
	});
}

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>


<table id='tablaModalCumpleaños' class='tablaModalCumpleaños display' cellspacing='0'>
					<thead>
						<tr>
							<th>IDENTIFICACIÓN</th>
							<th>NOMBRES</th>
							<th>APELLIDOS</th>
							<th style="width: 10%;">FECHA INICIO</th>
							<th style="width: 10%;">FECHA FIN</th>
							<th>DÍAS</th>
							<th>COLEGIO</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1107851551</td>
							<td>ESTEBAN</td>
							<td>PAZ</td>
							<td>2018-04-01</td>
							<td>2018-04-05</td>
							<td>2</td>
							<td>COLEGIO LA ASUNCION</td>
						</tr>

						<tr>
							<td>114555551</td>
							<td>DANIEL</td>
							<td>PAZ</td>
							<td>2019-04-01</td>
							<td>2020-04-05</td>
							<td>10</td>
							<td>COLEGIO SIH SEDE INVICALI</td>
						</tr>


						<tr>
							<td>114555551</td>
							<td>ALEJANDRO</td>
							<td>RAMIREZ</td>
							<td>2016-04-01</td>
							<td>2020-04-05</td>
							<td>20</td>
							<td>COLEGIO SIH SEDE ALFONSO LOPEZ</td>
						</tr>


						<tr>
							<td>114555551</td>
							<td>CARLOS</td>
							<td>GOMEZ</td>
							<td>2017-04-01</td>
							<td>2020-04-05</td>
							<td>40</td>
							<td>COLEGIO SIH SEDE ALFONSO LOPEZ</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<th>IDENTIFICACIÓN</th>
							<th>NOMBRES</th>
							<th>APELLIDOS</th>
							<th style="width: 10%;">FECHA INICIO</th>
							<th style="width: 10%;">FECHA FIN</th>
							<th>DÍAS</th>
							<th>COLEGIO</th>
						</tr>
					</tfoot>
				</table>

6
  • Bienvenido, te invito a darte un paseo por el recorrido de bienvenida y a echarle un vistazo a Cómo preguntar y a ejemplo mínimo verificable. ¿Podrías poner el código que tienes?
    – Kiko_L
    el 9 abr. 2018 a las 14:44
  • Ya agregue, el código la verdad no soy experto en datatables y soy nuevo programando encontre ese código en este mismo foro y lo que hice fue intentar ver si acoplandolo al mío funcionaba pero solo me arroja el color rojo. el 9 abr. 2018 a las 15:11
  • ¿Puedes poner tu html?
    – Kiko_L
    el 9 abr. 2018 a las 15:29
  • Oye perdón es que soy nuevo en este foro como hago para agregarlo? el 9 abr. 2018 a las 15:36
  • Edita tu pregunta y pega el código ;)
    – Kiko_L
    el 9 abr. 2018 a las 15:37

1 respuesta 1

0

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");
1
  • Muchas gracias por tu tiempo y por ayudarme, al final decidí hacerlo mediante php y enviarle el texto ya coloreado a el datatable. el 9 abr. 2018 a las 16:49

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.