01 - Cómo mostrar tablas profesionales con el plugin Datatables y Laravel
HTML-код
- Опубликовано: 29 авг 2020
- ------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.codersfree.com/larave...
🟠 Laravel avanzado: youtube.codersfree.com/larave...
🟢 Ecommerce: youtube.codersfree.com/ecommerce
🔵 Api: youtube.codersfree.com/api-re...
🟠 Plataforma de cursos: youtube.codersfree.com/plataf...
🔴 Vue e Ineria: youtube.codersfree.com/vue-3-...
🟣 Eloquent Avanzado: youtube.codersfree.com/eloque...
🟡 Pasarela de pagos: youtube.codersfree.com/pasare...
⚫ Laravel Web Socket: youtube.codersfree.com/larave...
🟣 Notificaciones: youtube.codersfree.com/notifi...
🟢 Laravel Excel: youtube.codersfree.com/larave...
🔵 Digital Ocean: youtube.codersfree.com/despli...
🟡 Laravel Voyager: youtube.codersfree.com/larave...
🟣 Datatable Livewire: youtube.codersfree.com/datata...
🟠 Tenancy for Laravel: youtube.codersfree.com/multi-...
🔵 TDD Laravel: youtube.codersfree.com/tdd-la...
⚫ Traducir páginas: youtube.codersfree.com/traduc...
🟠 Wire UI: youtube.codersfree.com/livewi...
🔴 Acortador de links: youtube.codersfree.com/acorta...
🟡 Banhammer for laravel: youtube.codersfree.com/banham...
🟢 Laravel backup: youtube.codersfree.com/larave...
🔵 Actualizar a Laravel 10: youtube.codersfree.com/actual...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com/paypalme/Coder...
-----------------------------------------------------------------------
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.
Bastante completo compañero, muchas gracias!, Con ansias esperando el próximo
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.
Saludos Crack, excelente video, haz el crud de esa tabla!
eres un crack, video perfecto 10/10
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, me ha ido de lujo! Sobre todo la parte responsiva del final.
@@lgxbrielc7958 creo que sii
Gracias por tu apoyo con estos tutoriales. Tieens alguna manera de mostrar columnas con progresive bar?
Excelente explicación y que gran forma de observar los pequeños errores XD
Me fue muy útil, gracias.
Excelente.
Muchas gracias
Excelente buen Tips....
gracias me sirvió para corregir errores
Me funciona solamente cuando uso adminlte, si intento usasr el layout app deja de funcionar, como podria corregir esto?
Gracias Mostro!!!
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?
Victor segui todos los pasos pero la parte responsive no me funciona, podrias revisar si algo cambio
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.
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?
gracias me re sirvio
Genial.
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!!
solo me aparece el boton del responsive en el primer columna??, a que se deberá ya revise bien mi código.
Hola, buen día, con datables también se puede buscar por datos relacionados a otra tabla ?
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
Muy bueno, pero sería mejor aún trabajar un datatable con VueJS directramente
hola el DataTable se puede implementar con AdminLTE en laravel ? ya que si no me equipoco laravel ya no usa bootstrap
como podria implementarlo ya use todos los links pero para esa vista no estoy usando admin lte
amigo este video es la continuacion del 4 vídeo de agg adminlte?
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
en donde se encuentra adminlte::page
en que videos pusiste esa tabla?
Por ejemplo si tengo mas de 20.000 datos, como hago uso de serverside ??
Jquery por mas que dicen que murió, hoy en dia esta mas vivo que nunca
En realidad Jquery solo tiene utilidad para usar los plugins que se crearon en algún momento con esta tecnología.
Usarlo para mantener un proyecto, es demasiado engorroso, y hará que tu proyecto sea difícil de mantener. Y sobre todo porque no tiene ningún sentido usarlo, porque todo lo que en algún momento soluciono Jquery, ahora se puede hacer de manera nativa con Javascript.
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.
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.
Me muestra los datos correctamente pero no me muestra la barra ed busqueda ni los botones
Amigo, que buen video.. Pero te ganarías una buena donación si enseñas como hacerlo sin usar cdn.
Hola alguien sabe como modificar las propiedades de datatable una vez inicializada ?
Alguien me puede explicar como hacer esto para que funcione sin conexión a internet ?
La paginación se me coloca al centro y no al costado 😓 lo mismo con el buscar
me gustaria algo sencillo pero funcional para login y register, es decir como validar informacion correo y contraseña
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
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
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.
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 😁
De esta forma, en cuanto tengas más de 10k registros al traerlos todos de golpe te va a petar. Saludos
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
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.
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
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.
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:
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 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!!!!
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
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.
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!