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.

SUSCRÍBETE AHORA Y ACCEDE A TODO EL MATERIAL DE INMEDIATO, CURSOS Y TIPS AND TRICKS
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register