Datatables en Vuejs 2 con Vuetify y Serverside
En esta entrada vamos a aprender a implementar Datatables en Vuejs 2 con Vuetify utilizando Laravel como servidor.
No va a ser una entrada sencilla, se da por hecho tener conocimientos avanzados de Vuejs 2 y Laravel 5, cualquier duda recuerda que tienes muchos cursos disponibles y actualizados en la plataforma para poder entender esta entrada de forma completa.
La idea es imaginar que tenemos 2 proyectos distintos, un cliente con Vuejs 2 y un servidor con Laravel 5 y que necesitamos crear una tabla avanzada que nos permita filtrar, buscar, ordenar y paginar, pero todo ello en el servidor, no sólo en el cliente.
Pero no sólo eso, además de tener una tabla compleja, también vamos a añadir cierta lógica para poder generar y descargar archivos Excel con Vuejs 2 de la búsqueda actual de nuestra tabla,
El motivo de querer hacerlo en el servidor es muy sencillo, si utilizamos Datatables en el cliente y tenemos 2.000.000 de datos, esos 2.000.000 de datos tendrán que ser retornados en una única petición, algo inviable, en cambio, si lo hacemos en el servidor, únicamente retornaremos los que deseamos mostrar en cada página, algo que hará que nuestras tablas rindan mucho más.
Otro tema importante será ver cómo utilizar la función debounce de lodash dentro de los métodos de Vuejs para evitar hacer múltiples peticiones en el evento keyup cuando un usuario esté realizando búsquedas en nuestra aplicación, algo súper importante.
Servidor con Laravel 5
Lo primero que vamos a hacer es definir todo lo que necesitamos en nuestro servidor, es decir, un modelo User con un método Scope de Eloquent para tener los datos filtrados y ordenados de forma correcta y que esa información pueda ser reutilizada para el export de archivos Excel y para el listado de Datatables con Vuejs 2.
Así que procedemos a añadir el siguiente código, cada uno en su archivo correspondiente:
La verdad que todos los métodos anteriores son muy simples, modelo, controlador y rutas, cada uno hace algo concreto, a saber:
El modelo accede a los datos de la base de datos.
El controlador utiliza el modelo para retornar información.
Las rutas ejecutan los controladores para mostrar la respuesta al cliente.
Almacén de datos en el cliente con Vuex
Para que nuestro trabajo en el cliente con Vuejs 2 se vea simplificado vamos a utilizar Vuex, si no lo conoces, en la plataforma tienes varios cursos.
Mixin ExportUsersToExcel
Ahora debemos crear un mixin haciendo uso del paquete XLSX para poder exportar el filtro actual de usuarios a un archivo .xlsx.
Vista para mostrar la tabla de usuarios
Con este último archivo damos por finalizado este Tip and Trick, que al fin y al cabo lo único que se pretende es ofrecer una completa receta para añadir este tipo de funcionalidades a nuestros proyectos, espero que te haya sido de ayuda.