15 Como INCORPORAR DATATABLE en mi tabla de USUARIO del Sistema de Ventas con (PHPyMySql)FullStack

Duración: 13 min
Módulo: 👤 CRUD de Usuarios y Roles (Seguridad Lógica) Lección 7 de 17

Descripción

📊 Lección 15: Cómo Incorporar DataTable en mi Tabla de Usuario

Esta lección se enfoca en transformar una tabla estática simple en una tabla dinámica y altamente funcional utilizando la librería DataTables. Esto añade características esenciales como búsqueda, paginación, ordenamiento y exportación de datos.

1. 🚀 Integración de la Librería DataTables

Para dotar de dinamismo a la tabla de usuarios, se integran los archivos y scripts de DataTables, aprovechando los que ya vienen incluidos en la plantilla AdminLTE:

  • Inclusión de CSS: Las referencias a los archivos CSS de DataTables y sus extensiones (como Buttons) se incluyen en la cabecera del proyecto (archivo layout/parte_1.php) [03:01].
  • Inclusión de JavaScript (JS): Los archivos JS principales de DataTables y sus plugins (para funcionalidades como PDF, Excel, y copiado) se referencian en la parte final del proyecto, antes del cierre del </body> (archivo layout/parte_2.php) [03:44].

2. 💻 Activación y Configuración del Script

Una vez incluidas las librerías, se activa DataTables para la tabla específica de usuarios:

  • Script de Inicialización: El código de activación de DataTables se añade en la vista views/usuarios/index.php [05:06].
  • Asignación de ID: Es crucial que la etiqueta <table> de la vista de usuarios tenga un atributo id (ej. tabla_usuarios) que coincida con el selector usado en el script de DataTables [05:38].
  • Configuración Completa: Se utiliza una configuración completa de DataTables (similar al example 1 de AdminLTE) que incluye la funcionalidad de botones de exportación [09:12].

3. ✨ Funcionalidades Dinámicas Añadidas

La integración exitosa de DataTables dota a la tabla de las siguientes capacidades avanzadas:

IconoFuncionalidadDescripciónTimestamp
🔍Buscador/FiltroBúsqueda y filtrado en tiempo real de cualquier dato en la tabla (por nombre, correo, etc.) [01:26].[01:26]
🔢PaginaciónControl automático para dividir los resultados en varias páginas [00:32].[00:32]
⬆️⬇️OrdenamientoPosibilidad de ordenar los datos de forma ascendente o descendente haciendo clic en el encabezado de cada columna [00:26].[00:26]
📄Reportes (Botones)Inclusión directa de botones para Copiar, Exportar a Excel, Exportar a PDF e Imprimir los datos de la tabla con solo un clic [00:40].[11:32]
👁️Visibilidad de ColumnasOpción para ocultar o mostrar dinámicamente cualquier columna de la tabla [01:00].[01:00]

Con esta implementación, la tabla de listado de usuarios pasa de ser un simple elemento estático a una herramienta administrativa completa y muy intuitiva.