19 Como INSTALAR DATATABLES en LARAVEL(PHP-MySql) FullStack
Duración: 13 minDescripción
💾 Lección 19: Instalación y Uso de DataTables en Laravel
Título del Video: 19 Como INSTALAR DATATABLES en LARAVEL (PHP-MySql) FullStack
Esta lección introduce la herramienta DataTables para transformar la tabla de listado de usuarios en una "tabla inteligente" con funcionalidades avanzadas como búsqueda, paginación automática y exportación de datos (Excel, PDF).
💡 ¿Qué es DataTables?
DataTables es una librería de JavaScript que añade interactividad y potencia a las tablas HTML. Convierte tablas estáticas en herramientas dinámicas para la gestión de datos. El video destaca que esta funcionalidad ya está preintegrada en la plantilla AdminLTE que se está utilizando [02:47].
Las funciones principales de DataTables incluyen:
- Paginación: Manejo automático de grandes conjuntos de datos, permitiendo navegar entre páginas (Siguiente, Anterior) [02:20].
- Búsqueda Global: Un campo de búsqueda que filtra resultados en tiempo real a través de todas las columnas [01:46].
- Control de Registros: Opción para mostrar 10, 25, 50 o 100 registros por página [01:35].
- Ordenamiento: Capacidad de ordenar la tabla de forma ascendente o descendente por cualquier columna [10:25].
- Exportación de Datos: Permite descargar el contenido de la tabla en formatos como Excel, PDF o copiarlo al portapapeles [11:05].
🛠️ Proceso de Instalación
El proceso consiste en vincular los archivos CSS y JavaScript necesarios para activar la librería.
1. Inclusión de Archivos CSS y JS (Layout Principal)
Todos los archivos se incluyen en el layout principal del administrador (layouts/admin.blade.php) para que DataTables esté disponible en todas las vistas del sistema.
- Archivos CSS: Se agregan los enlaces <link> en la cabecera (sección head) de la plantilla. Se utiliza la función URL() de Laravel para referenciar correctamente la ubicación de los archivos en la carpeta public [03:42].
- Archivos JavaScript: Se agregan las etiquetas <script> en la parte inferior del archivo, antes del cierre del <body> [05:37].
Nota de Orden: El video enfatiza que es crucial respetar el orden de carga de los scripts. La librería de DataTables debe cargarse después de la librería jQuery para que funcione correctamente y evitar errores de consola [09:30].
2. Activación en la Vista (index.blade.php)
Para que una tabla específica se convierta en DataTables, solo se necesita un pequeño script y un identificador.
- Identificador (ID): A la etiqueta <table> en la vista de listado de usuarios (index.blade.php), se le asigna un atributo id (por ejemplo, id="example1") [07:57].
Activación JS: Se añade un bloque de script que inicializa la tabla usando su ID. Esta función es parte de la librería jQuery y DataTables:
JavaScript
$(function () { $("#example1").DataTable(); });
(Note: Aunque se solicitó no usar bloques de código, se usa este formato para mostrar el script funcional de activación, que es la única pieza de código relevante para el usuario).
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
