Datatables rango de Fechas ejemplo completo

Datatables rango de Fechas. Si tenemos una tabla de datos grande que contiene información de con fechas y deseamos filtrar por rango de fechas, déjame decirte que estas en el lugar correcto. Por lo tanto, hemos implementado un formulario por encima de la datatables para filtrar por una fecha de inicio y una fecha de término y posee el siguiente formato (yyyy-mm-dd).

¿Cómo puedo filtrar el rango de fechas en DataTables?

Podemos realizarlo usando Ajax y PHP conjuntamente con la base de datos MySQL: Además, de jQuery UI para mostrar el calendario que el usuario final debe de elegir la fecha.

 // Datapicker 
$( ".datepicker" ).datepicker({
"dateFormat": "yy-mm-dd",
changeYear: true
});

¿Qué recursos usar para un Datatables rango de Fechas?

• Crear un formulario HTML con 2 input y su botón de búsqueda
• Implementar jQuery UI CSS para mostrar una caja de fechas
• Agregar instrucciones de búsqueda en PHP Between

¿Cómo usar un rango de fechas con Datatable?

Primero si deseamos buscar por fechas tenemos que hacer uso de los dos campos de fechas que se encuentra en la parte superior de nuestro datatables.

• Llenar una fecha de inicio y fecha de término que actuara como rango de fechas
• Presionar el botón «Buscar«, si deseamos borrar los rangos de fechas tenemos que presionar el botón «limpiar«.

Estructura y contenido de Datatables rango de Fechas

A continuación, veremos los archivos y librerías que componen el ejemplo

Declarar librerías necesarias

Ya sabemos que datatables funciona con librerías externas (CDN) o también podemos descargarlo y ubicarlo en una carpeta de nuestro proyecto.

Además. para darle una interfaz profesional hemos incluido el framework Bootstrap5 que es compatible con Datatables.

<!-- jQuery UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- jQuery UI JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<!-- Datatable Boostrap5 -->
<script src="//cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">

Crear base de datos y tabla MySQL

Crea una base de datos llamado «e_rango_datatables” y la tabla de «personal» y agregué más registros para probar el ejemplo.

Una vez creado la base de datos puede ejecutar la siguiente consulta para poder crear la tabla y sus registros. Puede usar HeidiSQL o PHPMyadmin.

CREATE TABLE `personal` (
`id` int(11) NOT NULL,
`nombres` varchar(160) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
`salario` decimal(10,2) NOT NULL,
`genero` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
`ciudad` varchar(130) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(120) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
`fecha_ingreso` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `personal` (`id`, `nombres`, `salario`, `genero`, `ciudad`, `email`, `fecha_ingreso`) VALUES
(1, 'Juan Carrillo Gomez', '12000.00', 'Hombre', 'Miami', 'juan@miweb.com', '2021-11-29'),
(2, 'Pedro Melendez', '5000.00', 'Hombre', 'Santiago', 'pedro@miweb.com', '2021-11-30'),
(3, 'Sofia Castillo', '7000.00', 'Mujer', 'Cali', 'sofia@miweb.com', '2021-11-30'),
(4, 'Carlos Briston', '4000.00', 'Hombre', 'Lima', 'carlos@miweb.com', '2021-12-01'),
(5, 'Lucia Fuentes', '5000.00', 'Mujer', 'Buenos aires', 'lucia@miweb.com', '2021-11-02');

ALTER TABLE `personal`
ADD PRIMARY KEY (`id`);

ALTER TABLE `personal`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

Para la búsqueda de fechas, creó un campo de nombre ‘fecha_ingreso‘ de tipo fecha. Por lo tanto, en esta columna se realizará la búsqueda por rango de fechas.

Configuración base de datos

Usaremos un archivo llamado conexion.php que se encargara de generar la conexión con MySQL. Sin embargo, debemos de poseer las credenciales de MySQL ya sea un servidor de desarrollo (Localhost) o de producción.

<?php

// Declaramos las credenciales de conexion
$host = "localhost"; /* Nombre de host */
$user = "root"; /* User */
$password = "root"; /* Password */
$dbname = "e_rango_datatables"; /* Nombre de la base de datos */

// Creamos la conexion MySQL
$db = new mysqli($host, $user, $password,$dbname);
// Verificamos la conexión
if (!$db) {
die("Conexion fallida: " . mysqli_connect_error());
}
?>

HTML completo

Para el filtro de fecha, hemos creado dos elementos de texto. Y se agregó «class= datepicker'» para inicializar datepicker. Además, cree un elemento de botón para iniciar la búsqueda por fecha.

Crea una tabla HTML y agreguemos un identificador llamado «Tabla_personal«, la tabla debería verse así: <table id = 'Tabla_personal'>.

<main>
<div class="container">
<div class="alert alert-primary" role="alert">
Datatables con rango de fechas
</div>

<!-- Date Filter -->
<form id="formFecha">
<table>
<tr>
<td>
<input type='text' readonly id='buscar_inicio' class="datepicker" placeholder='Fecha Inicio'class="form-control form-control-sm">
</td>
<td>
<input type='text' readonly id='buscar_fin' class="datepicker" placeholder='Fecha fin' class="form-control form-control-sm">
</td>
<td>
<input type='button' id="btn_search" value="Buscar" class="btn btn-primary btn-sm">
</td>
<td>
<input type='button' id="btnLimpiar" value="Limpiar" class="btn btn-danger btn-sm">
</td>
</tr>
</table>
</form>
<hr>
<!-- Table -->
<table id='Tabla_personal' class="table table-striped" style="width:100%">
<thead>
<tr>
<th>Nombre personal</th>
<th>Email</th>
<th>Salario</th>
<th>Ciudad</th>
<th>Fecha de ingreso</th>
</tr>
</thead>

</table>
</div>

</main>
<script>
$("#btnLimpiar").click(function(event) {
$("#formFecha")[0].reset();
});
</script>

Script JS

Usaremos un archivo llamado «script.js» que se encuentra en la raíz de nuestro proyecto y será declarado antes del cierre de la etiqueta </body>

<script src="script.js"></script>

Este fichero será el encargado de inicializar el datatables con el ID llamado «Tabla_personal«. Además, también iniciara la búsqueda por fechas.

Código completo

$(document).ready(function(){

// Datapicker 
$( ".datepicker" ).datepicker({
"dateFormat": "yy-mm-dd",
changeYear: true
});

// Iniciamos el DataTable
var dataTable = $('#Tabla_personal').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
'processing': true,
'serverSide': true,
'serverMethod': 'post',
'searching': true,
'ajax': {
'url':'extraer.php',
'data': function(data){
// Leer valores de fecha
var buscar_inicio = $('#buscar_inicio').val();
var buscar_fin = $('#buscar_fin').val();

// Append to data
data.buscarFechaInicio = buscar_inicio;
data.buscarFechaFin = buscar_fin;
}
},
'columns': [
{ data: 'nombres' },
{ data: 'email' },
{ data: 'salario' },
{ data: 'ciudad' },
{ data: 'fecha_ingreso' },
]
});

// Boton Buscar
$('#btn_search').click(function(){
dataTable.draw();
});

});

Explicación

• Inicia el datepicker usando la clase «class = 'datepicker'«.
• Genera el DataTable a través del ID #Tabla_personal que está declarada en la tabla HTML.
• Se establece el procesamiento en el lado del servidor 'serverSide': true,
• Para procesar la información usa el método POST: 'serverMethod': 'post'
• Para extraer la información de la base de datos usara un fichero llamado extraer.php y con la ayuda de Ajax mostrara resultados en la tabla HTML.

PHP (extraer.php)

• Creamos un archivo extraer.php para el manejo de solicitudes AJAX.
• Lea los valores POST de DataTable y los asigna en variables para iniciar la búsqueda.
• Lee los valores de filtro de fecha y asigna variables llamado $buscarFechaInicio y $buscarFechaFin.
• Inicia la variable $response en Array con los valores requeridos y devuelve en formato JSON para ser mostrado en el datatables.

<?php
include 'conexion.php';

## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($db,$_POST['search']['value']); // Search value

## Variables de busqueda por fecha
$buscarFechaInicio = mysqli_real_escape_string($db,$_POST['buscarFechaInicio']);
$buscarFechaFin = mysqli_real_escape_string($db,$_POST['buscarFechaFin']);

## Busqueda normal 
$searchQuery = " ";
if($searchValue != ''){
$searchQuery = " and (nombres like '%".$searchValue."%' or email like '%".$searchValue."%' or ciudad like'%".$searchValue."%' ) ";
}

// Filtramos por fecha
if($buscarFechaInicio != '' && $buscarFechaFin != ''){
$searchQuery .= " and (fecha_ingreso between '".$buscarFechaInicio."' and '".$buscarFechaFin."' ) ";
}

## Número total de registros sin filtrar
$sel = mysqli_query($db,"select count(*) as allcount from personal");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];

## Número total de registros con filtrado
$sel = mysqli_query($db,"select count(*) as allcount from personal WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];

## Obtener registros
$empQuery = "select * from personal WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
$empRecords = mysqli_query($db, $empQuery);
$data = array();
//Procesar informacion de MySQL
while ($row = mysqli_fetch_assoc($empRecords)) {
$data[] = array(
"nombres"=>$row['nombres'],
"email"=>$row['email'],
"fecha_ingreso"=>$row['fecha_ingreso'],
"salario"=>$row['salario'],
"ciudad"=>$row['ciudad']
);
}

## Respuesta
$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordwithFilter,
"aaData" => $data
);

echo json_encode($response);
die;

Conclusión

En este artículo hemos pasado los valores del filtro de fecha usando la opción de datos ajax. Además, hemos usado librerías para mostrar un datepicker (calendario flotante para elegir fechas), esto se inicia cuando el usuario le da clic en el input de fechas.

Además, en extraer.php hemos agregado mediante una condicional la búsqueda de fecha, es decir si el usuario no agrega ninguna fecha se omite la búsqueda por fechas, caso contrario si el usuario ingresa rango de fechas se agregará a la consulta SQL para ser procesado.

Otro detalle, también hemos incorporado el framework 5 en su última versión

Si este articulo te ayudo a resolver tus problemas, no olvides compartirlo en las redes sociales.