Estoy desarrollando una pequeña aplicación que me permita listar una serie de registros de una base de datos, filtrados por medio de la fecha de registro, que será seleccionada por medio de un input
de tipo date
.
vistas/hombrehora.php
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header with-border">
<div class="col-md-3">
<h1 class="box-title">Control de Hombre Hora </h1>
<button class="btn btn-success" id="btnagregar" onclick="mostrarform(true)"><i class="fa fa-plus-circle"></i> Agregar</button>
</div>
<div class="col-md-6">
<input type="date" class="form-control" name="datePicker" id="datePicker" required>
</div>
<div class="col-md-3 box-tools">
<button class="btn btn-primary" id="btnactualizar" onclick="actualizar_lista($('#datePicker').val());return false;"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- /.box-header -->
<!-- centro -->
<div class="panel-body table-responsive" id="listadoregistros">
<table id="tbllistado" class="table table-striped table-bordered table-condensed table-hover">
<thead>
<th>Opciones</th>
<th>Grado</th>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
<th>Periodo 1</th>
<th>Periodo 2</th>
<th>Periodo 3</th>
<th>Periodo 4</th>
</thead>
<tbody>
</tbody>
<tfoot>
<th>Opciones</th>
<th>Grado</th>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
<th>Periodo 1</th>
<th>Periodo 2</th>
<th>Periodo 3</th>
<th>Periodo 4</th>
</tfoot>
</table>
</div>
<!-- /.box-header -->
<!-- centro -->
<div class="panel-body" id="formularioregistros">
<form name="formulario" id="formulario" method="POST">
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>FECHA</label>
<input type="hidden" name="id_hh" id="id_hh">
<input type="date" class="form-control" name="fecha" id="fecha" required>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>RUT:</label>
<input type="number" class="form-control" name="rut_usuario" id="rut_usuario" maxlength="8" placeholder="RUT" required>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>HORA(*):</label>
<select id="hora_1" name="hora_1" class="form-control selectpicker" required>
<option value="08:00:00" selected>Periodo 1 (08:00 - 09:59)</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>MOTIVO:</label>
<select id="motivo_1" name="motivo_1" class="form-control selectpicker" data-live-search="true" required>
<option value="1">FLA</option>
<option value="2">228</option>
<option value="3">COM</option>
<option value="4">LIC</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>HORA(*):</label>
<select id="hora_2" name="hora_2" class="form-control selectpicker" required>
<option value="10:00:00">Periodo 2 (10:00 - 11:59)</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>MOTIVO:</label>
<select id="motivo_2" name="motivo_2" class="form-control selectpicker" data-live-search="true" required>
<option value="1">FLA</option>
<option value="2">228</option>
<option value="3">COM</option>
<option value="4">LIC</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>HORA(*):</label>
<select id="hora_3" name="hora_3" class="form-control selectpicker" required>
<option value="12:00:00">Periodo 3 (12:00 - 13:59)</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>MOTIVO:</label>
<select id="motivo_3" name="motivo_3" class="form-control selectpicker" data-live-search="true" required>
<option value="1">FLA</option>
<option value="2">228</option>
<option value="3">COM</option>
<option value="4">LIC</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>HORA(*):</label>
<select id="hora_4" name="hora_4" class="form-control selectpicker" required>
<option value="14:00:00">Periodo 4 (14:00 - 17:00)</option>
</select>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>MOTIVO:</label>
<select id="motivo_4" name="motivo_4" class="form-control selectpicker" data-live-search="true" required>
<option value="1">FLA</option>
<option value="2">228</option>
<option value="3">COM</option>
<option value="4">LIC</option>
</select>
</div>
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button class="btn btn-primary" id="btnGuardar"><i class="fa fa-save"></i> Guardar</button>
<button class="btn btn-danger" onclick="cancelarform()" type="button"><i class="fa fa-arrow-circle-left"></i> Cancelar</button>
</div>
</form>
</div>
<!--Fin centro -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
Implementé un switch
con un case
listar() en el archivo hombrehora.php, para llamarlo desde el js
hombrehora.js por medio de ajax
y listarlo por medio de datatables
.
ajax/hombrehora.php
$hh=new Hombrehora();
$id_hh=isset($_POST["id_hh"])?limpiarCadena($_POST["id_hh"]):"";
$fecha=isset($_POST["fecha"])?limpiarCadena($_POST["fecha"]):"";
$fecha_sql=date('Y-m-d', strtotime($fecha));//formatear la fecha para Mysql
$rut_usuario=isset($_POST["rut_usuario"])?limpiarCadena($_POST["rut_usuario"]):"";
$hora_1=isset($_POST["hora_1"])?limpiarCadena($_POST["hora_1"]):"";
$hora_2=isset($_POST["hora_2"])?limpiarCadena($_POST["hora_2"]):"";
$hora_3=isset($_POST["hora_3"])?limpiarCadena($_POST["hora_3"]):"";
$hora_4=isset($_POST["hora_4"])?limpiarCadena($_POST["hora_4"]):"";
$motivo_1=isset($_POST["motivo_1"])?limpiarCadena($_POST["motivo_1"]):"";
$motivo_2=isset($_POST["motivo_2"])?limpiarCadena($_POST["motivo_2"]):"";
$motivo_3=isset($_POST["motivo_3"])?limpiarCadena($_POST["motivo_3"]):"";
$motivo_4=isset($_POST["motivo_4"])?limpiarCadena($_POST["motivo_4"]):"";
$datePicker=isset($_POST["fechaSelect"])?limpiarCadena($_POST["fechaSelect"]):"";
echo $datePicker;
switch ($_GET["op"]){
case 'listar':
$rspta=$hh->listar($datePicker);
$data= Array();
while ($reg=$rspta->fetch_object()){
$data[]=array(
"0"=>'<button class="btn btn-warning" onclick="mostrar('.$reg->id.')"><i class="fa fa-pencil"></i></button>',
"1"=>$reg->grado,
"2"=>$reg->nombre_usuario,
"3"=>$reg->apellido_pat,
"4"=>$reg->apellido_mat,
"5"=>$reg->mot_1,
"6"=>$reg->mot_2,
"7"=>$reg->mot_3,
"8"=>$reg->mot_4,
"9"=>$reg->rut,
"10"=>$reg->fecha
);
}
$results = array(
"sEcho"=>1, //Información para el datatables
"iTotalRecords"=>count($data), //enviamos el total registros al datatable
"iTotalDisplayRecords"=>count($data), //enviamos el total registros a visualizar
"aaData"=>$data);
echo json_encode($results);
break;
}
Función listar.
modelos/Hombrehora.php
Class Hombrehora
{
//Implementamos nuestro constructor
public function __construct()
{
}
public function listar($datePicker)
{
$sql="SELECT a.id,
a.rut,
b.rut as rut_usuario,
b.nombre as nombre_usuario,
b.apellido_1 as apellido_pat,
b.apellido_2 as apellido_mat,
b.grado as grado,
a.fecha,
a.motivo_1,
a.motivo_2,
a.motivo_3,
a.motivo_4,
c.id_motivos,
c.nom_motivo as mot_1,
d.id_motivos,
d.nom_motivo as mot_2,
e.id_motivos,
e.nom_motivo as mot_3,
f.id_motivos,
f.nom_motivo as mot_4
FROM hombre_hora_reg a
INNER JOIN usuario b ON a.rut=b.rut
INNER JOIN motivos c ON a.motivo_1=c.id_motivos
INNER JOIN motivos d ON a.motivo_2=d.id_motivos
INNER JOIN motivos e ON a.motivo_3=e.id_motivos
INNER JOIN motivos f ON a.motivo_4=f.id_motivos
WHERE a.fecha='$datePicker'";
return ejecutarConsulta($sql);
}
}
Que recibe el parámetro $datePicker y hace un select
a la base de datos en cuestión, filtrando por el $datePicker.
Para poder capturar el valor del $datePicker del HTML
creé una función en un archivo js
.
scripts/hombrehora.js
var tabla;
//Función que se ejecuta al inicio
function init(){
mostrarform(false);
setInputDate("#datePicker");
setInputDate("#fecha");
listar();
$("#formulario").on("submit",function(e)
{
guardaryeditar(e);
})
}
//fecha actual del cliente en base a su zona horaria
function setInputDate(_id){
var _dat = document.querySelector(_id);
var hoy = new Date(),
d = hoy.getDate(),
m = hoy.getMonth()+1,
y = hoy.getFullYear(),
data;
if(d < 10){
d = "0"+d;
};
if(m < 10){
m = "0"+m;
};
data = y+"-"+m+"-"+d;
console.log(data);
_dat.value = data;
}
function actualizar_lista(fechaSelect){
var parametros = {
"fechaSelect" : fechaSelect
};
$.ajax({
data: parametros,
url: '../ajax/hombrehora.php',
type: 'POST',
success: function (response) {
bootbox.alert(response);
}
});
}
function listar()
{
tabla=$('#tbllistado').dataTable(
{
"aProcessing": true,//Activamos el procesamiento del datatables
"aServerSide": true,//Paginación y filtrado realizados por el servidor
dom: 'Bfrtip',//Definimos los elementos del control de tabla
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdf'
],
"ajax":
{
url: '../ajax/hombrehora.php?op=listar',
type : "get",
dataType : "json",
error: function(e){
console.log(e.responseText);
}
},
"bDestroy": true,
"iDisplayLength":15,//Paginación
"order": [[ 0, "desc" ]]//Ordenar (columna,orden)
}).DataTable();
}
El problema que tengo es que cuando quiero que mi función listar() me liste los registros, basado en el parámetro $datePicker que está recibiendo, no me lista ningún registro, porque recibe el valor del $datePicker vació, siendo que la petición de ajax
es respondida con el valor de la fecha seleccionada en el input type:date
#datePicker del HTML
(me muestra el valor de la fecha selecionada en el bootbox que programé), pero la función listar() no recibe ese valor y por ende, me muestra el datatable
vació.
Ahora, si coloco el valor de $datePicker de manera directa como un valor de fecha, como por ejemplo:
$datePicker='2019-12-18';
Me lista los registros que tengo almacenados bajo ese parámetro sin problemas.
Es mas que obvio que un sistema así requiere de un selector de fechas dinámico para generar las consultas y mostrar la información y es por eso que no me sirve dejarlo estático.
Alguien me podría orientar porqué me puede estar pasando esto?. O si tiene una mejor manera de capturar un input
de tipo date
y pasarlo como parámetro a una consulta y así obtener el resultado requerido.
De antemano, muchas gracias por su ayuda y me disculpo además, si no he sido capaz de explicarme o hacerme entender como corresponde. Con vuestra ayuda y consejos iré ganando experiencia para poder orientar mejor mis dudas.
Saludos.
$('#datePicker').val()
que te retorna?input
de tipodate
esté enviando la fecha en el mismo formato que lo pones de manera estática, es decir, 2019-12-18. Por lo que alcanzo a ver, lo envía de esta forma 12/18/2019... Esa sería la razón de que no te devuelva resultados. si ese es el caso, debes cambiar el formato delinput
.