Buscador jQuery PHP MySQL usando Datatables
Buscador jQuery PHP MySQL usando Datatables. Hoy en día la forma de mostrar la información es muy útil para los sistemas web como para las empresas que usan este tipo de software. Por lo tanto, estamos hablando de las tablas con características dinámicas para realizar búsquedas.
Sin embargo, usaremos un plugin jQuery que se utiliza para mostrar los resultados en un formato tabular para los usuarios. Nos proporciona una interfaz dinámica con una clasificación y filtro de manera eficaz, la búsqueda de resultados, también la paginación como características para manejar resultados obtenidos de la base de datos.
Buscador jQuery PHP MySQL usando Datatables
A continuación, daremos solución a algunas preguntas sobre el uso de este método.
¿Que plugin se utilizara para realizar búsquedas dinámicas?
Usaremos el plugin «DataTable» proporciona las funciones de devolución de llamada de encabezado y pie de pantalla para manipular datos HTML a través de una tabla con una interfaz de usuario intuitiva.
¿Cómo implementar el código?
Para implementar el procesamiento del lado del servidor, he utilizado la clase SSP de las tablas de datos para generar la solicitud de información con los parámetros requeridos. La respuesta del script se codificará como JSON y se cargará en la interfaz de usuario de DataTable mediante Ajax.
Integración de tablas de los mismos en HTML
La biblioteca datatables se agrega como parte del código en nuestro HTML. Sin embargo, para ver las futuras actualizaciones de la librería podemos descargar desde github.
Este código muestra el HTML para incluir e inicializar tablas de los mismos para integrar esta biblioteca mencionada.
Una referencia de tabla HTML se utiliza como un selector de jQuery para inicializar tablas de los mismos con las opciones requeridas. Para agregar el plugin de tablas de jQuery, necesitamos seguir los siguientes pasos.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Buscador jQuery PHP MySQL usando Datatables | BaulPHP</title>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="vendor/DataTables/jquery.datatables.min.css">
<script src="vendor/DataTables/jquery.dataTables.min.js" type="text/javascript"></script>
<title>Column Search in DataTables using Server-side Processing</title>
<script>
$(document).ready(function ()
{
$('#tbl-contact thead th').each(function () {
var title = $(this).text();
$(this).html(title+' <input type="text" class="col-search-input" placeholder="Buscar ' + title + '" />');
});
var table = $('#tbl-contact').DataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "server.php",
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
table.columns().every(function () {
var table = this;
$('input', this.header()).on('keyup change', function () {
if (table.search() !== this.value) {
table.search(this.value).draw();
}
});
});
});
</script>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Buscador jQuery PHP MySQL usando Datatables</h3>
<hr>
<div class="row">
<div class="col-12 col-md-12">
<!-- Contenido -->
<div class="datatable-container">
<table name="tbl-contact" id="tbl-contact" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Dirección</th>
<th>Telefono</th>
<th>Fecha de Nacimiento</th>
</tr>
</thead>
</table>
</div>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin row -->
</div>
<!-- Fin container -->
<footer class="footer">
<div class="container"> <span class="text-muted">
<p>Códigos <a href="https://www.baulphp.com/" target="_blank">BaulPHP</a></p>
</span> </div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="dist/js/bootstrap.min.js"></script>
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Devolución de llamada de encabezado de DataTable para mostrar búsqueda por columnas
En esta sección, se muestra el código de la función de devolución de llamada de DataTables. En esta devolución de llamada, el encabezado de la tabla se cambia anexando la opción de búsqueda a cada columna.
Con la referencia del campo de entrada de búsqueda de cada encabezado de columna, se asigna el evento de clave para desencadenar la solicitud de búsqueda. Al escribir en el campo de entrada de búsqueda, se filtrarán los datos de la columna de tablas.
<script>
$(document).ready(function ()
{
$('#tbl-contact thead th').each(function () {
var title = $(this).text();
$(this).html(title+' <input type="text" class="col-search-input" placeholder="Buscar ' + title + '" />');
});
var table = $('#tbl-contact').DataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "server.php",
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
table.columns().every(function () {
var table = this;
$('input', this.header()).on('keyup change', function () {
if (table.search() !== this.value) {
table.search(this.value).draw();
}
});
});
});
</script>
Código php para obtener datos de las tablas para el procesamiento
Este es el código que contiene el archivo Server. php. Este archivo se marcará como la opción de origen al inicializar las tablas de archivos. En este código, se declaran las especificaciones de configuración de base de datos, tabla, columnas, primary_key y se utilizan para solicitar los datos dinámicos de las tablas.
La clase SSP se utiliza para obtener el resultado de la base de datos mediante el procesamiento simple/complejo del lado del servidor. Los datos resultantes se codificarán en formato JSON y se harán eco de la devolución de llamada de Ajax.
<?php
// DB table que usaremos para el ejemplo
$table = 'tbl_personal';
// Table's llave primaria
$primaryKey = 'id';
$columns = array(
array( 'db' => 'nombres', 'dt' => 0 ),
array( 'db' => 'apellidos', 'dt' => 1 ),
array( 'db' => 'direccion', 'dt' => 2 ),
array( 'db' => 'telefono', 'dt' => 3,),
array( 'db' => 'fecha_nacimiento','dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'd-m-Y', strtotime($d));
}
)
);
// Mysql Conexion
$sql_details = array(
'user' => 'root',
'pass' => 'root',
'db' => 'php_buscadorjquery',
'host' => 'localhost'
);
require( 'vendor/DataTables/server-side/scripts/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
Poblando nuestra base de datos
Esta es una secuencia de comandos SQL que contiene la estructura de «php_buscadorjquery» de la tabla de base de datos y sus respectivos registros para dicho ejemplo. Por lo tanto, debe importar este script en el PHPMyAdmin.
CREATE TABLE IF NOT EXISTS `tbl_personal` ( `id` int(11) NOT NULL, `nombres` varchar(255) DEFAULT NULL, `apellidos` varchar(255) DEFAULT NULL, `direccion` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `telefono` varchar(30) DEFAULT NULL, `fecha_nacimiento` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla Personal'; INSERT INTO `tbl_personal` (`id`, `nombres`, `apellidos`, `direccion`, `email`, `telefono`, `fecha_nacimiento`) VALUES (1, 'Carlos', 'Flores', 'Av. Santander 456', 'carlos@ftyuri2.com', '45741254', '1992-04-18'), (2, 'Manuel', 'Figueroa', 'Calle San carlos 564', 'Manuel@ftyuri2.com', '84231025', '1988-01-25'), (3, 'Miguel', 'Calderon', 'Av. Luis Fred 878', 'miguel@ftyuri2.com', '74120542', '1989-07-26'), (4, 'Juan', 'Warisa', 'Los Claveles 554', 'juan@ftyuri2.com', '98254120', '1998-12-30'), (5, 'Luisa', 'Santi', '32 Stanford Miami', 'luisa@ftyuri2.com', '01245784', '1995-11-28'), (6, 'Marco', 'Calcina', 'Los Marianos 344 ', 'marco@ftyuri2.com', '41254784', '1988-11-16'), (7, 'Abigail', 'Cedan', 'Puerto Moon 232', 'abigail@ftyuri2.com', '12014587', '1982-07-12'), (8, 'Rosa', 'Altamirano', 'Los rosales 845', 'rosa@ftyuri2.com', '74012548', '2002-10-14'), (9, 'Alejandro', 'Marreros', 'Golden Start 784', 'alejo@ftyuri2.com', '65012356', '2001-10-22'), (10, 'Mariana', 'Herrera', 'Campo de Marte 145', 'mariana@ftyuri2.com', '74587458', '2000-11-30'); ALTER TABLE `tbl_personal` ADD PRIMARY KEY (`id`);
Búsqueda de columnas con la salida de procesamiento lateral del servidor DataTable
Esta captura de pantalla de salida muestra los resultados obtenidos dinámicamente mediante el uso de tablas de archivos de secuencias de comandos del lado del servidor. En esta salida, se muestra la opción de búsqueda de columnas para filtrar los datos de la columna por palabra clave.
CONCLUSIÓN
La tecnología va creciendo cada día y la facilidad para mostrar la información también. Po tal motivo, les traigo un pequeño ejemplo para realizar búsquedas dinámicas usando la librería DataTables.
Este ejemplo recoge la información de la base de datos y la muestra de manera muy intuitiva. Su uso es muy recomendable porque no consume recursos del servidor ya que trabaja con jQuery y Ajax.
DESCARGA
Les dejare un paquete completo con todos los datos para que puedan realizar practicas con dicho código.
[sociallocker id=»5099″] Descargar Código Fuente [/sociallocker]
Hola Nestor: Recién compre en línea el producto :Descargar Roles Permisos Usuarios.
Para la instalación correcta del código, sigo las instrucciones sugeridas en el archivo: «instalar». Los pasos 1 a 3 no tengo problema. Sin embargo el paso 4 no me queda claro, consecuentemente es probable que no lo esté haciendo de la manera correcta, y sea esta la razón por la cual me tira un error.
¿Es posible que me asesores para poder instalar y correr el código adecuadamente?. Gracias.
Añado que también compre: Datatables Dropdown PDO, ServerSide, Responsiva — Código Fuente Completo. Hasta ahora , corre perfectamente.
Hola Arturo
Escríbenos a nestor@www.baulphp.com y en el email proporcione el email de compra, recuerda que el script tiene soporte para el usuario final acerca de instalación y asesoramiento de uso.
Saludos
Gracias por el correo Nestor. Así lo hice, pero escribí al correo: registro@www.baulphp.com.
Hola me gusta mucho la forma en que explicas y abordas cada ejemplo, pero en este caso en especifico me arroja el siguente error y no entiendo el por que
DataTables warning: table id=tbl-contact – Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
segun yo el problema es aqui
$(‘#tbl-contact thead th’).each(function () {
porque si le quito el thead th deja de mandar el mensaje pero no hace nada
Saludos
Hola Jose
Ese tipo de error suele ser más por el tema de la conexión a MySQl y/o Las consultas SQL.
SALUDOS, este codigo serviria para mostrar mas de 10mil registras?
Amigo el código es hermoso, la funcionalidad impecable, pero para las personas que apenas estamos aprendiendo el código no es entendible, ¿hay alguna parte donde podamos mirar la funcionalidad y entender para poderlo implementar según nuestras necesidades? Muchas gracias.
Si aun tienes problemas puedo enviarte un ejemplo muy practico o mostrarte una forma personal que utilizo y es muy practica