I am doing a crud, what I want to do is color the row red. If the date of entry is already 5 or more days old, I tried it in several ways but I was not successful, I am still new to programming, so some things are difficult for me, I also put all the code so that they can understand What I am doing, I also ask you for some advice on how to improve my code, since I have had certain details in the information recovery, that is, when I click on edit, it shows me the last record that I selected and not the one that I want to edit, I don't know if it's a problem with the browser or my functions.
$(document).ready(function () {
var id, opcion;
opcion = 4;
// Fecha actual en milisegundos
const today = Date.now();
function calcDays(dateStr) {
// Separar fecha y hora
let [dt, tm] = dateStr.split(' ');
// Separar año, mes y día
let [Y, M, D] = dt.split('-');
// Separar horas, minutos y segundos
let [h, m, s] = tm.split(':');
// Crear objeto de fecha, se tienen que enviar todos los parámetros separados
let dateObj = new Date(Y, M - 1, D, h, m, s);
// Obtener diferencia entre ambas fechas, dividido entre 1000 para que sean segundos
let timeDiff = parseInt((today - dateObj.getTime()) / 1000);
// Dividir diferencia entre 86400 que son los segundos por día (60*60*24)
let days = parseInt(timeDiff / 86400);
// Fechas anteriores dan números positivos
return days;
}
tablaReportes = $("#tablaReportes").DataTable({
ajax: {
url: "../controlador/reportes.php",
method: "POST",
data: { opcion: opcion },
dataSrc: "",
},
//Para cambiar el lenguaje a español
language: {
lengthMenu: "Mostrar _MENU_ registros",
zeroRecords: "No se encontraron resultados",
info: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
infoEmpty: "Mostrando registros del 0 al 0 de un total de 0 registros",
infoFiltered: "(filtrado de un total de _MAX_ registros)",
sSearch: "Buscar:",
oPaginate: {
sFirst: "Primero",
sLast: "Último",
sNext: "Siguiente",
sPrevious: "Anterior",
},
sProcessing: "Procesando...",
},
columns: [
{ data: "id" },
{ data: "folio" },
{ data: "nombre" },
{ data: "apellido" },
{ data: "direccion" },
{ data: "descripcion_domicilio" },
{ data: "telefono" },
{ data: "num_contrato" },
{ data: "fecha_inicio" },
{ data: "fecha_final" },
{
data: "cuadrilla",
render: function (data, type, row, meta) {
switch (data) {
case "1":
data =
'<span class="badge badge-pill badge-primary">Operación ciudad</span>';
break;
case "2":
data =
'<span class="badge badge-pill badge-primary">Operación megasistema</span>';
break;
case "3":
data =
'<span class="badge badge-pill badge-secondary">Drenajes</span>';
break;
case "4":
data =
'<span class="badge badge-pill badge-secondary">Tomas tapadas</span>';
break;
case "5":
data =
'<span class="badge badge-pill badge-info">Cloración</span>';
break;
case "6":
data = '<span class="badge badge-pill badge-dark">Bacheo</span>';
break;
case "7":
data =
'<span class="badge badge-pill badge-info">Contratos</span>';
break;
case "8":
data = '<span class="badge badge-pill badge-info">Otros</span>';
break;
default:
data = "";
}
return data;
},
},
{
data: "estatus",
render: function (data, type, row, meta) {
switch (data) {
case "1":
data = '<span class="badge badge-warning">Inicio</span>';
break;
case "2":
data = '<span class="badge badge-warning">Pendiente</span>';
break;
case "3":
data = '<span class="badge badge-success">Terminado</span>';
break;
case "4":
data = '<span class="badge badge-danger">Cancelado</span>';
break;
default:
data = "";
}
return data;
},
},
{ data: "observaciones" },
{ data: "encargado_cuadrilla" },
{ data: "otra_descripcion" },
{
defaultContent: `<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnPrint'><i class='material-icons'>print</i></button><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>`,
},
],
columnDefs: [
{
// Aplicar solo a celda 8
targets: 8,
// Ejecutar cuando se crea la celda
createdCell: function (td, cellData, rowData, row, col) {
console.log(cellData, cellData[8], calcDays(cellData[8]));
// Ejecuta la función para calcular diferencia
if (calcDays(cellData[8]) >= 5) {
$(td).css("background-color", "#E60026");
}
},
},
],
//para usar los botones
responsive: "true",
dom: "Bfrtilp",
buttons: [
{
extend: "excelHtml5",
text: '<i class="fas fa-file-excel"></i> ',
titleAttr: "Exportar a Excel",
className: "btn btn-success",
},
{
extend: "pdfHtml5",
text: '<i class="fas fa-file-pdf"></i> ',
titleAttr: "Exportar a PDF",
className: "btn btn-danger",
},
{
extend: "print",
text: '<i class="fa fa-print"></i> ',
titleAttr: "Imprimir",
className: "btn btn-info",
},
],
});
var fila; //captura la fila, para editar o eliminar
//submit para el Alta y Actualización
$("#formReportes").submit(function (e) {
e.preventDefault(); //evita el comportambiento normal del submit, es decir, recarga total de la página
folio = $.trim($("#folio").val());
nombre = $.trim($("#nombre").val());
apellido = $.trim($("#apellido").val());
direccion = $.trim($("#direccion").val());
descripcion_domicilio = $.trim($("#descripcion_domicilio").val());
telefono = $.trim($("#telefono").val());
num_contrato = $.trim($("#num_contrato").val());
fecha_inicio = $.trim($("#fecha_inicio").val());
fecha_final = $.trim($("#fecha_final").val());
cuadrilla = $.trim($("#cuadrilla").val());
estatus = $.trim($("#estatus").val());
observaciones = $.trim($("#observaciones").val());
encargado_cuadrilla = $.trim($("#encargado_cuadrilla").val());
otra_descripcion = $.trim($("#otra_descripcion").val());
$.ajax({
url: "../controlador/reportes.php",
type: "POST",
datatype: "json",
data: {
id: id,
folio: folio,
nombre: nombre,
apellido: apellido,
direccion: direccion,
descripcion_domicilio: descripcion_domicilio,
telefono: telefono,
num_contrato: num_contrato,
fecha_inicio: fecha_inicio,
fecha_final: fecha_final,
cuadrilla: cuadrilla,
estatus: estatus,
observaciones: observaciones,
encargado_cuadrilla: encargado_cuadrilla,
otra_descripcion: otra_descripcion,
opcion: opcion,
},
success: function (data) {
console.log(data);
tablaReportes.ajax.reload(null, false);
},
});
$("#modalCRUD").modal("hide");
});
//para limpiar los campos antes de dar de Alta una Persona
$("#btnNuevo").click(function () {
opcion = 1; //alta
id = null;
$("#formReportes").trigger("reset");
$(".modal-header").css("background-color", "#17a2b8");
$(".modal-header").css("color", "white");
$(".modal-title").text("Alta Reportes");
$("#modalCRUD").modal("show");
});
$(document).on("click", ".btnPrint", function (e) {
window.open(
"./../Reports/orden.php?id=" +
Number(
e.target.parentNode.parentNode.parentNode.parentNode.parentNode.querySelector(
".sorting_1"
).textContent
),
"_black"
);
});
//Editar
$(document).on("click", ".btnEditar", function () {
opcion = 2; //editar
fila = $(this).closest("tr");
id = parseInt(fila.find("td:eq(0)").text()); //capturo el ID
folio = fila.find("td:eq(1)").text();
nombre = fila.find("td:eq(2)").text();
apellido = fila.find("td:eq(3)").text();
direccion = fila.find("td:eq(4)").text();
descripcion_domicilio = fila.find("td:eq(5)").text();
telefono = fila.find("td:eq(6)").text();
num_contrato = fila.find("td:eq(7)").text();
fecha_inicio = fila.find("td:eq(8)").text();
fecha_final = fila.find("td:eq(9)").text();
cuadrilla = fila.find("td:eq(10)").text();
estatus = fila.find("td:eq(11)").text();
observaciones = fila.find("td:eq(12)").text();
encargado_cuadrilla = fila.find("td:eq(13)").text();
otra_descripcion = fila.find("td:eq(14)").text();
$("#folio").val(folio);
$("#nombre").val(nombre);
$("#apellido").val(apellido);
$("#direccion").val(direccion);
$("#descripcion_domicilio").val(descripcion_domicilio);
$("#telefono").val(telefono);
$("#num_contrato").val(num_contrato);
$("#fecha_inicio").val(fecha_inicio);
$("#fecha_final").val(fecha_final);
$("#cuadrilla option:contains(" + cuadrilla + ")").attr("selected", "");
$("#estatus option:contains(" + estatus + ")").attr("selected", "");
$("#observaciones").val(observaciones);
$("#encargado_cuadrilla").val(encargado_cuadrilla);
$("#otra_descripcion").val(otra_descripcion);
$(".modal-header").css("background-color", "#007bff");
$(".modal-header").css("color", "white");
$(".modal-title").text("Editar Reporte");
$("#modalCRUD").modal("show");
});
//Borrar
$(document).on("click", ".btnBorrar", function () {
fila = $(this);
id = parseInt($(this).closest("tr").find("td:eq(0)").text());
opcion = 3; //eliminar
var respuesta = confirm("¿Está seguro de borrar el registro " + id + "?");
if (respuesta) {
$.ajax({
url: "../controlador/reportes.php",
type: "POST",
datatype: "json",
data: { opcion: opcion, id: id },
success: function () {
tablaReportes.row(fila.parents("tr")).remove().draw();
},
});
}
});
});
I leave a picture of my crud
This shows me in my console
Error in the last update
Importante: El tipo de dato en la columna 8 no es numérico, entonces, la comparación
rowData[8] >= 5
difícilmente funcionará como esperas. Tratándose de fechas, debes recurrir al objeto DateAl inicio de tu script crea el objeto para la fecha actual, para que no tengas que hacerlo en cada comparación y también crea una función que reciba la fecha a comparar y devuelva los días de diferencia con la actual:
Después de definir el origen de datos de cada celda, agrega otra propiedad columnDefs para especificar el comportamiento de la celda deseada:
Edición: De acuerdo a lo que resulta de
console.log(cellData, rowData[8], calcDays(rowData[8]));
, hay que usar la variablecellData
para obtener la cantidad de días.Dejo esto después de la edición solo para que quede claro cómo usar los selectores en jQuery.
You're not using a proper selector, you need to select by index with the eq() method :
Brief explanation:
$(row)
: Select the row.find('td')
: Get all cells.eq(8)
: Select cell 9, because the index starts at zero