JQuery biblioteca de JavaScriptMYSQL La base de datos

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.

Buscador jQuery PHP MySQL
Buscador jQuery PHP MySQL

¿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.

Buscador jQuery PHP MySQL usando Datatables
Buscador jQuery PHP MySQL usando Datatables

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]

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

8 comentarios

  1. 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.

  2. 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

  3. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba