01 - Cómo mostrar tablas profesionales con el plugin Datatables y Laravel
Вставка
- Опубліковано 19 вер 2024
- ------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.coders...
🟠 Laravel avanzado: youtube.coders...
🟢 Ecommerce: youtube.coders...
🔵 Api: youtube.coders...
🟠 Plataforma de cursos: youtube.coders...
🔴 Vue e Ineria: youtube.coders...
🟣 Eloquent Avanzado: youtube.coders...
🟡 Pasarela de pagos: youtube.coders...
⚫ Laravel Web Socket: youtube.coders...
🟣 Notificaciones: youtube.coders...
🟢 Laravel Excel: youtube.coders...
🔵 Digital Ocean: youtube.coders...
🟡 Laravel Voyager: youtube.coders...
🟣 Datatable Livewire: youtube.coders...
🟠 Tenancy for Laravel: youtube.coders...
🔵 TDD Laravel: youtube.coders...
⚫ Traducir páginas: youtube.coders...
🟠 Wire UI: youtube.coders...
🔴 Acortador de links: youtube.coders...
🟡 Banhammer for laravel: youtube.coders...
🟢 Laravel backup: youtube.coders...
🔵 Actualizar a Laravel 10: youtube.coders...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com...
-----------------------------------------------------------------------
Datatables: datatables.net/
I don't know Spanish, but this guy made the best guide, how to use Datatables in Laravel.
If you mute the sound and repeat everything from this video it will be working)
Gracias!
PS: I used @stack and @push, instead @yiend and @content, because PHPStorm starting showing errors.
Que fácil y sencillo lo haces campeón, y que claro en tus conceptos. Muchísimas gracias por compartirlo.
Te amo we. Se que esto es poco, pero de verdad, me impulsaste de nuevo a seguir, ya me sentía muy atascado con estas tablas jajaajaja. Muchas gracias amigo.
Bastante completo compañero, muchas gracias!, Con ansias esperando el próximo
Saludos Crack, excelente video, haz el crud de esa tabla!
Me funciona solamente cuando uso adminlte, si intento usasr el layout app deja de funcionar, como podria corregir esto?
Excelente video estuve días con este problema una solución bien explicada. Por favor tienes videos que contenga el datatable botones edit, show y delete.
Gracias por tu apoyo con estos tutoriales. Tieens alguna manera de mostrar columnas con progresive bar?
Gracias por la ayuda. Saludos.
Victor segui todos los pasos pero la parte responsive no me funciona, podrias revisar si algo cambio
solo me aparece el boton del responsive en el primer columna??, a que se deberá ya revise bien mi código.
Gracias, me ha ido de lujo! Sobre todo la parte responsiva del final.
@@lgxbriel creo que sii
Excelente explicación y que gran forma de observar los pequeños errores XD
Excelente buen Tips....
Hola
Gracias por el video.
Te queria pedir si puedes hacer un tutorial de como utilizar select2 con laravel, para ver como seleccionar y pasar el item seleccionado a u a tabla. Obvoamente explicado en su estilo. Explicas muy bien bro.
Gracias
Si claro. Voy a aprovechar el proyecto que estoy haciendo, y mañana grabo un video explicando cómo usar el plugin select 2
eres un crack, video perfecto 10/10
hola el DataTable se puede implementar con AdminLTE en laravel ? ya que si no me equipoco laravel ya no usa bootstrap
Me fue muy útil, gracias.
en donde se encuentra adminlte::page
que tal? buen video, y gracias por tu explicación detallada, tengo una duda, si tengo mas de una tabla hay que hacer ese procedimiento para todas? o existe algún método para reutilizar código?
gracias me sirvió para corregir errores
Excelente.
Muchas gracias
Muy bueno, pero sería mejor aún trabajar un datatable con VueJS directramente
Hola, buen día, con datables también se puede buscar por datos relacionados a otra tabla ?
Tengo un problema instale el DataTable Yajra pero no me funciona el buscar ni el ordenar, lo configure haber si estaban activados y nada.
tengo el mismo problema, pudiste resolverlo amigo?
@@danielmartinez4045 Pues quite todo lo que tenia y hize la tabla denuevo y hay me volvio a funcionar, no se en que ira.
@@alexo2537 gracias, pues trataré de hacerlo de nuevo, espero me funcione. Gracias.
bien explicado falta el crud de esta tabla!!!! :)
Estoy terminando de desarrollar la plataforma de Coders Free. Ni bien la termine continuó con la serie.
Pero por si te interesa ya esta el segundo video en el que explico como traducir datatable
@@CodersFree Hola, te pregunto ¿Ya está público el video para traducir DataTable?
Si amigo, lo subi hace una semana. El video que me falta es como hacer un crud
Excelente video y fácil de implementar, amigo una consulta: Me encontré con un error y es que en la segunda hoja de la paginación los botones no me funcionan, tengo botón de eliminar( este botón abre un modal para eliminar ) pero no me funciona después de la segunda hoja de paginación. Gracias
gracias me re sirvio
Gracias Mostro!!!
Me muestra los datos correctamente pero no me muestra la barra ed busqueda ni los botones
A mi no me funcionan los cambios en datatable.
Para que funcione datatable tengo que agregar "let table = new DataTable('#example').DataTable()" de lo contrario no funciona.
Aun así no puedo realizar cambios a datatable.
Quiero optimizar las consultas del controlador y estoy poniendo el método paginate(20) o con cualquier numero pero la consulta se queda frenada en esa cantidad para distribuir esas 20 filas en las páginas de los datatables. Si dejo los datatables con la paginación y todo lo que incluye y en el controlador solo uso los métodos ::All() y get() será que automáticamente jquery y Laravel me optimizan cuando los registros sean miles? o como manejaría esa parte para customizar la paginación y las consultas en los controladores? Gracias colegas... Amo Coders Free
Por ejemplo si tengo mas de 20.000 datos, como hago uso de serverside ??
Excelente, estoy viendo como hago para trabajar con los checkbox ya que tengo la necesidad de hacer seleccion multiple, te agradeceria mucho si haces un tutorial de como hacerlo.
Justo estaba pensando grabar un video en el que explico como trabajar con el paquete Laravel collective.
Laravel collective te facilita tremendamente el trabajar con formularios.
En el transcurso de los días estaré grabando un video explicando eso 😄
@@CodersFree Seria genial, el tema de los checkbox ya lo he manejado con tablas paginadas normales de laravel pero no he podido con datatables, seria muy util.
La paginación se me coloca al centro y no al costado 😓 lo mismo con el buscar
Como lo usas en todo el proyecto el Datatables
Genial.
como podria implementarlo ya use todos los links pero para esa vista no estoy usando admin lte
Alguien me puede explicar como hacer esto para que funcione sin conexión a internet ?
Gran video, una consulta. En mi tabla tengo datos y un botón (editar), funciona todo bien, pero al momento de usar responsive, el botón (editar) no funciona pero sí al momento de tener la tabla sin responsive. Que podría hacer para solucionar eso?
Buenas gracias por tus enseñanza, use tus videos para crear unas tablas con diseño profesional y funciono en laravel 7 pero ahora por el cambio de versión a laravel 8 no se porque motivo usos la misma estructura para realizar nuevas tablas y no funciona, estoy usando bootstrap y jquery, muchas gracias por la informacion que me puedas brindar.
Gracias!!
Amigo, que buen video.. Pero te ganarías una buena donación si enseñas como hacerlo sin usar cdn.
Si estoy en laravel 5.8 debo agregar la parte de Jquery?? eso no lo he entendido
Si no estás trabajando con jquery debes agregarlo.
hola, gracias por tus videos.
¿tienes alguna idea de por qué a pesar de haber agregado autowidth: false sigue fallando esa parte que no se adapta automaticamente al aumentar el tamaño de la pantalla?
Gracias.
Hola, el nombre de la propiedad es autoWidth , la w en mayúscula. Puede que estés escribiendo mal el nombre
@@CodersFree 😶 gracias
amigo este video es la continuacion del 4 vídeo de agg adminlte?
en que videos pusiste esa tabla?
Cuando hay muchos datos , por ejemplo más de 5000 la tabla se demora en cargar. ¿ Hay alguna forma de hacer un tipo paginación que solo cargue los datos que se muestren , de manera que no se demore al cargar la página ?
Continua viendo la serie 😁
Hola profe,
yo lo estoy haciendo en un proyecto a parte para probar y me tira "jQuery is not defined" pero jquery esta instalado por defecto.
alguna solucion?
saludos
Hola Joao. A partir de Laravel 8 jquery ya no viene instalado por defecto
@@CodersFree gracias por la respuesta!!!!
A alguien mas le sucede que al colocar otro (Cabezeras de la tabla).. ya no funciona... me pasa con 4 , todo funciona bien pero le agrego otro mas y ya no funciona :(
Me pasa lo mismo, ¿Has logrado resolver ese problema?
@@reneisaias2755 si ya lo solucione
@@omarvelazquezmartinez2345 Que bien, yo igual XD. Aunque al final termine por hacer mi propio datatable
Hola alguien sabe como modificar las propiedades de datatable una vez inicializada ?
Como puedo hacer para que me tome el datatable, sigo tal cual el video y no me funciona
Lo más seguro es que en la terminal del navegador te diga que el proyecto no reconoce los cdn
A mí me funciono agregando un defer según lo que me indicaba la terminal, así estás los cdn:
me gustaria algo sencillo pero funcional para login y register, es decir como validar informacion correo y contraseña
amigo una consulta porque en responsive la datatable no detecta si se presiono en un boton con javascrip o jquery
Podrías explicar mejor el problema 🤔
@@CodersFree intenta colocar con jquery un evento click y q muestre una alerta simple y verifica q funcione ese mismo evento en web y en datatable responsive veras que el evento click solo funciona bien en web y no en movil cuando datatable esta responsive no funciona, segui tu ejemplo usando sweetaler.js y funciona muy bien en web pero en movil no se ejecuta la alerta solo la eliminacion sin pasar por la confirmacion usando sweetaler.js
Si te funciona bien en la computadora, y no en el móvil, es muy probable que el problema radique en el navegador que tengas instalado en tu móvil.
Puede que tengas que actualizarlo para que funcione bien.
También me ha pasado a veces, sobre todo con flexbox, que en la mayoría de navegadores se veía bien maquetado, y en alguno que otro se veía todo descuadrado.
@@CodersFree chrome
@@CodersFree si eso pense llevo dos dias mirando como hacerlo ya me funciona pero no con el evento click normal de jquery no lo detecta en lugar eso lo hice con una funcion enviando el paramatro id y trabaja bien revisa si en movil funciona igual el q hiciste con laravel y sweealert.js
Muchas gracias por tus enseñanzas!!! Tengo una consulta, estoy intentando al proyecto de Blog tuyo agregarle la DataTable y me salta un error, inclusive también cuanto intento de llamarlas como plugin de AdminLTE, será algo con jquery?
El error que me muestra es:
[Error] TypeError: undefined is not an object (evaluating 'c.mData')
(función anónima) (jquery.min.js:2:31126)
SweetAlert2 me funciona perfecto, no puedo hacer funcionar el DataTable
Ya lo resolví, solo había que sacarle No acepta ponerle el colspan con 2.
Me gustó tu video.
Pero que pasaría si mi tabla tiene 50,000 registros se tarda mucho.
Yo ya hice ejemplo que hiciste.
En mi proyecto tengo mas de 50,000 registros.
Y se tarda la carga.
Que puedo hacer en este caso?
Revisa el video 3 de esta serie, ahí explico como solucionar ese problema
Hola muy buen vídeo me ayudo muchísimo, solo que tengo un par de problemas. Primero lo intenté realizar en un proyecto sin casi nada, una sola vista sin usar ninguna plantilla, no utilicé ningún section, metí los css en el head y los scripts en el body y fincionó, no del todo bien puesto que todo estaba movido, el serach en medio y la palabra show arriba del select y entries abajo del select, se veía como movido, no sé cual sea la falla.
Mi segundo problema fue cuando lo intente usar en otro proyecto y en una plantilla donde tengo un navbar de autentificación, hice los pasas anteriores, cada cosa en su lugar y en la vista que hereda de dicha platilla no agarra el Datatable, ni siquiera movido lo muestra. Espero y me puedas ayudar.
Saludos.
Hola, recuerda que para el tutorial escogí que iba a trabajar con Boostrap, así que para que los estilos se vean correctamente deberías haber cargado Boostrap en tu proyecto.
También asegúrate de tener cargado jquery en tu proyecto, sino no va a funcionar correctamente.
@Coders Free Muchas gracias, ya logré visualizar la tabla correctamente.
Pero tengo problemas al momento de querer usarlo en una vista que hereda de una plantilla, y es en esta plantilla donde tengo todo. No sé donde declarar los yield (css y js) en la platilla para después usar los section en la vista que los necesito.
@@andreihazaelmendozaesquive9546 pon un yield("css") justo antes de cerrar el header y un yield("js) justo antes de cerrar el body.
Y el escript de jquery lo colocas justo antes de este último yield
@@andreihazaelmendozaesquive9546 Hola Andrei como lo solucionaste
@@diegoospina9069 Hola amigo, pues mira, mi problema decía en la consola que el id de mi tabla no era una función, aún cuando estaba cargando los cdn. Encontré la siguiente solución, agregar el atributo defer antes de cerrar la etiqueta script. Los siguientes cdn no son los del video, porque yo decidí utilizar estos.
Ya con este mi proyecto reconoce los cdn y los utiliza sin problemas
Bro pero con muchos datos será muy lento, como puedo limitar los resultados del lado del servidor?. Osea que traiga de 5 en 5 y así.
Como lo resolviste?
@@a-gf3ef
Voy a buscar el vídeo, lo había guardado en una lista de reproducción.
De esta forma, en cuanto tengas más de 10k registros al traerlos todos de golpe te va a petar. Saludos
LO MALO DE ESTE PLUGIN DE JQUERY ES QUE HACE UNA BUSQUEDA A TODA LA TABLA PERO SI QUIERO POR EJEMPLO HACER UNA BUSQUEDA A UN SOLO CAMPO NO SE PUEDE, ES DECIR SI LA EDAD ES 13 EN UN CAMPO EDAD, Y HAY OTRA FILA Y QUE TIENE OTRO CAMPO FECHA 2013 MOSTRARA ESAS 2 FILAS LA QUE TIENE LA FECHA 2013 Y LA EDAD 13.
Puedes limitar los campos según el cual quieres que lo filtre.
Te recomiendo que leas la documentación
Bootstrap apesta!