• Versión
• Descargar 1380
• Tamaño del archivo 262.49 KB
• Recuento de archivos 1
• Fecha de creación 19 septiembre, 2018
• Última actualización 19 septiembre, 2018

Buscador online por columna usando DataTables

Buscador online por columna usando DataTables. En este artículo veremos la implementación de varios buscadores dentro de una tabla. Sin embargo, usaremos la librería "DataTables", en el cual extraeremos la información de una base de datos para poblar dicha tabla HTML.

DataTables Proporciona una interfaz muy, y podemos implementar búsqueda, paginación como características para manejar la información de una base de datos. Usando esto podemos enumerar y filtrar de manera dinámica resultados estáticos y dinámicos en nuestra tabla.

Buscador online por columna usando DataTables

Siguiendo con el tema a continuación veremos una descripción y componentes de este ejemplo de buscador.

Descripción del Plugins DataTables

Datatables es un plug-in para la librería JavaScript de jQuery. Se trata de una herramienta muy flexible, que se basa en las bases de la mejora progresiva, que añade todas estas características avanzadas a cualquier tabla HTML.

¿Cómo funciona el script?

Básicamente al cargar la página nos mostrara resultados de una tabla existente en una base de datos. Usaremos los siguientes campos, Nombres, Apellidos, Dirección, Teléfono, Fecha de Nacimiento.

La tarea de este ejemplo es realizar una tabla muy útil para nuestros sistemas. Por lo tanto, incorporamos buscadores en cada columna para ayudar a la persona que usa el sistema. También, posee un buscador general.

Además, si la información extraída de la base de datos es demasiado podemos filtrar por rango de registros.

COMPONENTES DEL SISTEMA

A continuación, describiremos los recursos que usa este sistema.

a) index.php. Fichero principal que será encargado de mostrar la tabla con datos de MySQL.
b) server.php. Archivo que será encargado de realizar la conexión con la base de datos

// SQL conexión con la base de datos
$sql_details = array(
    'user' => 'root',
    'pass' => 'root',
    'db'   => 'php_buscadorjquery',
    'host' => 'localhost'
);

c) Directorio vendor. Es la carpeta que contiene el plugin DataTables. Por lo tanto, este plugins hace que todo este sistema sea posible.
d) php_buscadorjquery.sql. Este fichero contiene la tabla y los respectivos registros que hacen realidad este ejercicio.

CONCLUSIÓN

• La implementación de nuevas librerías en nuestros sistemas es muy recomendable. Sin embargo, su uso nos proporcionara dinamismo y ahorro de tiempo a la hora de disponer de la información de manera dinámica.
• Espero que la breve explicación les sirva en sus proyectos y de paso les dejare un comprimido con el ejemplo completo.