Paint datatable cell

Question

Paint datatable cell

Navigation

#1 by (0 votes)

-1

I need help, in the information system in which I am working to list the information of workers' birthdays Datatable use but I need to paint the cells (The days that are missing to meet years) of the respective color bone:

If less than or equal to 2 days (Red)

If less than or equal to 10 days (Orange)

If less than or equal to 20 days (Blue)

The bone rest greater than 20 days of color (Green)

But I have not been able to since I am new in this of the programming I would be very helpful if someone answered me. Thanks !!

$(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>

datatable

asked by Daniel Alexander Paz 09.04.2018 в 16:27

source

1 answer

Complex query in Django ORM Return a string passed as an argument to a function

score 0 · Accepted Answer

The sitanxsis to add colors is correct, I do not understand very well but sometimes it does not. Try to return a function.

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

If it still does not work, define the colors in a style sheet and add your respective class.

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