Datatables - Responsive

Cómo lograr un comportamiento responsive con datatables.
Datatables responsive
datatables.net...

[@Kanthollw]

Puff hermano, cada vez que tengo un apuro, casi siempre encuentro una solución en tus tutoriales. Eres grande. Gracias por todo!!

[@saurom0lamderth]

Gracias, saludos desde Venezuela

[@mariocalcetin7602]

Señor ha traicionado al buen Brackets... no tiene perdón.. Como siempre tremendamente agradecido por sus tutoriales , ud es grande don DP . Abrazo desde este lado de la cordillera :) .

[@informaticadp]

Jaja Brackets me sigue gustando pero no lo actualizan. Un abrazo y gracias por los comentarios como siempre!

[@pepebiondi5962]

bah, lo mejorcito y gratis por ahora es VSC!

[@trotamundosist]

Excelente video. Aprendí varias cosas que desconocía de datatables js. Gracias

[@informaticadp]

Excelente Antonio!!! Saludos y gracias!

[@simonveliz832]

Saludos! que gustazo siempre ver nuevo material de tanta Utilidad! Activo con el Canal!

[@informaticadp]

Muchas gracias Simon. Saludos!

[@Pompinflompis]

Hola Informatica DP, excelente tu canal. Estoy empezando, perdon si me expreso de forma demasiado básica. Tenía una tabla en html a la que le hice CRUD desde cloud firestore (todos los se llenan con los datos de firestore, no tengo etiquetas en el html). Me funciona ok. Es simplemente el html y JS. Me encantó datatebles y cuando seguí todos estos pasos, es decir incluí todas las referencias que nombraste en este video= No funciona. En realidad este método no sería el adecuado para usar firestore, no?. Busqué en tu canal pero no encuentro un video que se ajuste, o al menos no me doy cuenta (está muy completo tu canal y comenzaré a verlo en detalle). Pero me podrías guiar en que tengo que tener en cuenta? No se como buscar documentación que me ayude.

[@informaticadp]

Muchas gracias! Sabes que estuve probando un CRUD con firebase. Lo probé y el real time es brutal. Tengo pendiente un curso sobre firebase y javascript. Respecto a datatables, todavía no lo probé con firebase ni cloud firestore. Quizás cuando haga el curso que te comenté, lo adapte. Saludos!

[@Pompinflompis]

@@informaticadp Si, está muy bueno Firestrore, cuando lo descubrimos nos picó el bichito de ponernos a aprender, porque ver que actualmente hay herramientas que te eximen de tener que aprender todo el backend nos sirvió de punta del hilo para empezar a investigar y ver como podemos aprender de manera autodidacta con lo que ya sabemos y cubrir algunas necesidades que tienen nuestros clientes. Estamos en casa con mi marido invirtiendo este tiempo de cuarentena en capacitarnos... veremos hasta donde llegamos. Espero con ansias tu video, mientras tanto voy a seguir buscando. Muchas gracias por tu respuesta

[@jassanzuleta5317]

Excelente todos los videos, felicitaciones...

[@informaticadp]

Muchas gracias Jassan!

[@iamthefuelte]

un crack, excelente video!!!muchas gracias por compartir

[@informaticadp]

Saludos Martin!!!

[@tionico5199]

Hola estoy aprendiendo angular. Se puede usar esta librería para Angular ? Pir que leí que en angular es mejor no usar jqueri y etsablibreria creo que usa jquieri

[@sansummer3760]

How can I change the color of thead > tr > th in mobile responsive its stay black I want it to white because my ui is dark design

[@mrcakil2616]

Sory my english is bad, but i want to ask you. If i have a responsive datatable like that, how i can add a child row extra column on my datatable?

[@jaircruces2789]

Hola, gracias por el excelente aporte, una vez más agradecido, solo tengo un pequeño problema, cuando el datatables es responsive, no me funciona el botón que tengo en este caso para enviar la información de los , pero si la pantalla es normal, todo funciona correctamente como quiero, consulta ¿ como puedo hacer para que me funcione el botón que tengo cuando está en responsive?, desde ya, muchas gracias por los excelentes aportes..

[@informaticadp]

Hola Jair muchas gracias! Sabes que en otros videos también me consultaron por lo mismo. En los comentarios algunos subs ya lo arreglaron. Fijate en los videos de crud con datatables en los comentarios. Saludos.

[@jaircruces2789]

@@informaticadp Gracias por responder a la brevedad, si leí los comentarios y encontré la solución, muchas gracias y siga subiendo más videos, muchas gracias por todo..

[@informaticadp]

Excelente! Saludos Jair.

[@AngelGadea]

@@informaticadp No puedo encontrar estos comentarios y tengo el mismo inconveniente, podrías indicarme en los comentarios de que video estaría?

[@na81cho]

Como se puede agregar unos botones al final de la tabla digamos en la última columna gracias

[@facundojaviersotelo]

Hola, gracias por tu tutorial, fue muy útil. Ojalá sigas con más de datatables. Te pregunto algo. Tengo encabezados complejos en un datatables, y cuando activo la opción de sensible, no los oculta, leí la documentación y aparentemente esto funcionó hasta la versión 1, pero no desde la 2, talvez puedas ayudarme, desde ya muchas gracias!

[@franciscomorales6378]

GRACIAS POR LA EXPLICACION, PREGUNTA PARA MODIFICAR EL NUMERO DE ELEMENTOS QUE ME MUESTRA LA TABLA DONDE HAGO LA MODIFICACIÓN?

[@djmata1664]

Buenas! y pj el search se epuede modificar como el tamaño, posicion y demas?

[@arielcasabene3080]

el link de descarga del proyecto me lleva a una pagian de publicidad no se como bajarlo

[@guissepirodriguez9982]

disculpe, me sale un error en una api, a q se debe? dataTables.responsive.min.js:formatted:520 Uncaught TypeError: Cannot read property 'Api' of undefined at dataTables.responsive.min.js:formatted:520 at dataTables.responsive.min.js:formatted:14 at dataTables.responsive.min.js:formatted:16

[@danielramirez9119]

Excelente amigo, buen video, tengo una consulta, si yo quiero ocultar información para que el usuario al interactuar con un botón lo muestre, por ejemplo como el tipo del despegable del responsive, se puede hacer con Datatables?

[@antoniotrejoreynosa1130]

Hazlo con una ventana modal, cuando el usuario precione sobre el boton "mostrar más" ese boton llama al modal y en el modal pones los datos que quieres que el usuario veaaa

[@carloschiroquesilva9611]

hola amigo muy buenos tus videos me gustaria saber como podria hacer una datatable que sea responsiva y a la ves me permita imprimir y descargar la tabla. gracais

[@hilarysherlynperezmorales7502]

Hola, Muchas gracias por el video...Una pregunta la clase display nowrap que es lo que hace ?

[@informaticadp]

Hola Hilary. Son valores de CSS, datatables en su documentación oficial recomienda usarlas para tal fin.

[@hilarysherlynperezmorales7502]

@@informaticadp Muchisimas gracias, funciono de maravilla

[@ernestoarias3404]

Hola informatica DP quiero darte las gracias por atender mi a solicitud la dar solucion a la misma, de hacer responsive el formulario, muchas gracias

[@informaticadp]

Gracias a vos Ernesto. Saludos!

[@studentssolutionz4051]

Thank You So Much.Its help me alot.

[@informaticadp]

Thanks!!

[@DragonEuby]

Excelente video. Hice el datatables responsive con server-side y le agregué un botón eliminar y uno editar a la tabla pero al editar la fila no me toma los datos que se encuentran en el detalle. Que podría estar haciendo mal. Espero que me ayudes.

[@informaticadp]

Muchas Gracias Euby! Mira no sé si viste este video, hago un CRUD con Server-side, utilizando los botones editar y eliminar. Espero te sirva. kzbin.info/www/bejne/kHnNnniNrNh4sMk

[@DragonEuby]

@@informaticadp hola si ya vi el video. Cuando use el responsive que coloco mas pequeña la pagina y le doy editar para abrir el modal no me toma los datos de la tabla. Me salen en blanco y estoy usando tal cual tus códigos.

[@raulleyvacontreras4161]

Cual es la solución a este problema?

[@walternomas]

Buenas, ¿Se puede aplicar lo del video anterior "Insertar filtros en las columnas" junto con "Responsive"?

[@informaticadp]

Si totalmente, todas las extensiones y plugins se pueden usar en un mismo proyecto.

[@walternomas]

@@informaticadp gracias por responder, a probar entonces!

[@caelestisdraco]

Buen video me encantaría saber como como hacer para que los datos en el modo responsive me salgan debajo del titulo del campo y al lado derecho

[@jimwv.c3075]

Hola tengo un error veras en el dataTables le agregó unos botones para editar y eliminar y en pantalla grande funcionan bien pero cuando ya los datos se van ocultando los botones no me jalan los datos, como podría corregir ese error? Buen video

[@pepebiondi5962]

Hola, muy bueno, funciona de maravillas pero hay una cosa que hay que saber, me pasa que tengo un datatable crud (que lo he hecho de uno de tus videos) con botones de acción modificar, borrar y al estar responsivo cuando esta plegado muestra la info pero el botón modificar carga el formulario vacío y borrar no funciona! así que tuve que quitar el responsivo.

[@informaticadp]

Muchas gracias! Fijate que podes envolver todo en una clase responsive si usas Bootstrap. Podes usar un poco de CSS y lo dejas perfecto.

[@edgar7936]

Que tal amigo, tus videos me han servido mucho y te lo agradezco Pero tengo un problema con esta implementación, esperaba que pudieras brindarme ayuda Lo que pasa es que mi tabla tiene dos botones de acciones, eliminar y editar Cuando esta en modo responsivo no funciona de manera correcta, presiono editar y mi modal no recolecta los datos y al momento de eliminar me marca el id como NaN, pero cuando esta en pantalla completa no hay problema porque si funciona Los botones de editar y eliminar, el proceso igual es de un video tuyo

[@informaticadp]

Edgar cómo estás. El mismo problema lo plantearon en el canal y lo arreglaron. No recuerdo en qué video. También pusieron la solución.

[@edgar7936]

@@informaticadp Excelente, amigo! logré solucionarlo, muchas gracias

[@informaticadp]

Buenísimo si lo querés compartir estaría genial. Para otro compañero que tenga el mismo problema. Saludos!

[@edgar7936]

Claro, a los th de los botones les agregamos la propiedad data-priority="1" Esto para que no se vayan con la animación, sino para que aparezcan como prioridad en el reponsive

[@informaticadp]

Excelente Edgar!

[@jubacchi]

Ajudou muuuuto. Obrigado.

[@informaticadp]

Muchas gracias!!

[@DiegoCar1971]

Hola, necesito tu ayuda, eatoy agregando Codigo a una aplicacion ya empezada, en laravel con VUE js, y por mas que configure la tabla a mano en la vista que estoy haciendo, no me toma el responsive, directamente pone un scroll X (aunque este en false) debe ser una configuracion global, pero no logro encontrarla. Podrias darme una idea de que puede ser? Muy bueno todo el Canal

[@DiegoCar1971]

Me contesto a mi mismo, ya logre ue las columnas desaparezcan si se achica la pantalla, no pone el scroll. Pero no hay forma que me muestre el boton para abrir las columnas ocultas, aunque tengo details en true, aguna sugerencia ?

[@shubhamsingla4118]

Thankyou so much brother

[@informaticadp]

Thanks for the comment bro!

[@arturocoello1954]

excelente video, una pregunta cuando uso botones al hacer pequeña la pantalla pierde su funcionalidad no me deja abrir un modal como lo tengo configurado pero si subo la resolucion si, saludos

[@arturocoello1954]

gracias al amigo alvaro lo solucione alvarocolas97 He averiguado como se hace, lo dejo aquí por si alguien lo necesita: añadir en los th de la tabla data-priority y el numero con el ranking de prioridad. Ej:

[@informaticadp]

Muchas gracias por el aporte.

[@uancamilo]

Hola, interesante el UI, esto se puede hacer con react?

[@informaticadp]

No probé react con datatables, supongo deben existir variantes.

[@jorgeronaldchungazapata976]

Amigo dp lo que pasa es que ize todo lo que dice tu video pero no los referencia no actualiza la tabla quiero saber donde coloco los archivos para que los pueda reconocer y se active la tabla muchas gracias desde ya por tus respuestas

[@informaticadp]

Hola Jorge, que parte no te muestra o que error te da? Si lo bajas al proyecto que dejé para descargar no te funciona?

[@JuliitoElegiito]

excelente el video!! podrias hacer un video MVC ?

[@informaticadp]

Muchas gracias! Si, estoy preparando varios cursos, entre ellos un MVC básico, un CRUD con firebase, quiero hacer algo con Laravel. Se vienen muchos proyectos.

[@velezfarak]

Muy bueno tu vídeo explicas muy bien pero sera posible usar eso con la opción server que los datos vengan del lado del servidor

[@informaticadp]

Muchas gracias Carlos, fijate en el canal hay proyectos con serverside. Te paso uno. Saludos. kzbin.info/www/bejne/onW6hmmApZV4ga8

[@ohiwantyoutobelieve]

Listo, gracias!

[@devgalanta3726]

Thankss!

[@informaticadp]

Thanks!!!

[@kingmega8730]

Source please

[@jorgeronaldchungazapata976]

Amigo tengo problemas con mi data table no actualiza el plug in revise el código u todo esta bien revise archivos puedes ayudarme

[@informaticadp]

Hola Jorge, si decime cual es el error? Si podes activa la consola de Chrome, ahi se ven los errores .

[@jorgeronaldchungazapata976]

Tus explicaciones son excelentes pero no encuentro el error te puedo enviar el código

[@informaticadp]

Muchas gracias. Si, fijate que podes usar datatables descargando los archivos a una carpeta de tu pc o sin descargar nada, simplemente referenciado adónde están alojados en la web, es decir sus CDNs. Te paso video con la primer forma luego con la segunda. kzbin.info/www/bejne/h4TSppWBmM-kpZo kzbin.info/www/bejne/pWqxc2qmfZecbrc

[@jorgeronaldchungazapata976]

@@informaticadp muchas gracias por tu tiempo cuando por udemy dando tus cursos te envio mi codigo porfavor drive.google.com/open?id=1GBWJHqj409q-xe3qPCsEsFKBxLFGEteD

[@jorgeronaldchungazapata976]

@@informaticadp A cookie associated with a cross-site resource at datatables.net/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at www.chromestatus.com/feature/5088147346030592 and www.chromestatus.com/feature/5633521622188032. sweetalert2.all.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) %20%20css:1 Failed to load resource: the server responded with a status of 404 () jquerynumber.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) sweetalert2.all.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) jquerynumber.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) %20%20css:1 Failed to load resource: the server responded with a status of 404 ()

[@commonsense4434]

Saludos! Ayúdame por favor! no puedo descargar los archivos del proyecto desde el enlace!

[@informaticadp]

Los links están ok. Es esperar 5 seg de publicidad.

[@commonsense4434]

@@informaticadp ¡No funciona! ¡Disculpas! ¿Puedes ponerlo en la cuenta gratuita de Dropbox?

[@informaticadp]

@@commonsense4434 Te paso el link www.dropbox.com/s/2dcjmsfuuskcqt0/dtr.zip?dl=0

[@commonsense4434]

¡Tengo el archivo! ¡increíble! ¡muy apreciado! :D

[@yogeshpatel3862]

Thanks my problem solve

[@informaticadp]

Excellent, greetings!

[@alvarocaceres742]

Excelente

[@informaticadp]

Gracias Alvaro!

[@rafaelrojas1803]

como hago para traducirlo y que sea Responsive a la ves?

[@informaticadp]

Hola Rafael, en este video explico como cambiar el idioma, entre otras cosas. Saludos. kzbin.info/www/bejne/pWqxc2qmfZecbrc

[@rafaelrojas1803]

@@informaticadp gracias por la respuesta, pero lo que veo es que el código para que sera responsive va en el mismo lugar donde va el código para que este en español, si coloco los dos códigos, no funciona, nose si hay un orden para colocarlos

[@informaticadp]

No son excluyentes estimado. Fijate bien y vas a ver que se puede.

[@rafaelrojas1803]

@@informaticadp vale, voy a intentarlo

[@rafaelrojas1803]

listo, solo era una coma, gracias por la ayuda :)

[@yogeshpatel3862]

From India

[@segba-caba-jorgegalati4296]

no encuentra la pàgina

[@wsintuj248]

👍

[@SrEquixs]

La descarga de tu proyecto manda a un sitio inseguro

[@informaticadp]

Esta en dropbox. No entres a esos sitios. Ya voy a sacar esa publicidad molesta.

[@SrEquixs]

@@informaticadp Lo habias de publicar en github

[@informaticadp]

Son archivos muy simples. Los proyectos más grandes están en mí repositorio de github.

[@davidaching1617]

@@informaticadp Hola, puedes pasar el enlace por favor