Datatables - Responsive

Sdílet
Vložit
  • čas přidán 29. 04. 2020
  • Cómo lograr un comportamiento responsive con datatables.
    Datatables responsive
    datatables.net/extensions/res...
  • Věda a technologie

Komentáře • 114

  • @Kanthollw
    @Kanthollw Před rokem +1

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

  • @simonveliz832
    @simonveliz832 Před 4 lety

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

    •  Před 4 lety +1

      Muchas gracias Simon. Saludos!

  • @trotamundosist
    @trotamundosist Před rokem

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

    •  Před rokem

      Excelente Antonio!!! Saludos y gracias!

  • @jassanzuleta5317
    @jassanzuleta5317 Před 3 lety

    Excelente todos los videos, felicitaciones...

    •  Před 3 lety

      Muchas gracias Jassan!

  • @facundojaviersotelo
    @facundojaviersotelo Před 2 lety +1

    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!

  • @iamthefuelte
    @iamthefuelte Před 2 lety

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

    •  Před 2 lety

      Saludos Martin!!!

  • @mariocalcetin7602
    @mariocalcetin7602 Před 3 lety

    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 :) .

    •  Před 3 lety

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

    • @pepebiondi5962
      @pepebiondi5962 Před rokem

      bah, lo mejorcito y gratis por ahora es VSC!

  • @franciscomorales6378
    @franciscomorales6378 Před rokem

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

  • @djmata1664
    @djmata1664 Před 2 lety

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

  • @na81cho
    @na81cho Před 2 lety

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

  • @tionico5199
    @tionico5199 Před 2 lety

    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

  • @arielcasabene3080
    @arielcasabene3080 Před 2 lety

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

  • @jimwv.c3075
    @jimwv.c3075 Před rokem

    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

  • @caelestisdraco
    @caelestisdraco Před 3 lety

    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

  • @mrcakil2616
    @mrcakil2616 Před rokem

    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?

  • @sansummer3760
    @sansummer3760 Před 2 lety

    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

  • @ohiwantyoutobelieve
    @ohiwantyoutobelieve Před 2 lety

    Listo, gracias!

  • @Pompinflompis
    @Pompinflompis Před 4 lety

    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.

    •  Před 4 lety

      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
      @Pompinflompis Před 4 lety

      @ 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

  • @studentssolutionz4051
    @studentssolutionz4051 Před 2 lety

    Thank You So Much.Its help me alot.

    •  Před 2 lety

      Thanks!!

  • @guissepirodriguez9982
    @guissepirodriguez9982 Před 3 lety

    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
    @danielramirez9119 Před 2 lety +1

    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
      @antoniotrejoreynosa1130 Před 2 lety +1

      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

  • @walternomas
    @walternomas Před 4 lety +1

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

    •  Před 4 lety

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

    • @walternomas
      @walternomas Před 4 lety

      @ gracias por responder, a probar entonces!

  • @hilarysherlynperezmorales7502

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

    •  Před 4 lety +1

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

    • @hilarysherlynperezmorales7502
      @hilarysherlynperezmorales7502 Před 4 lety

      @ Muchisimas gracias, funciono de maravilla

  • @shubhamsingla4118
    @shubhamsingla4118 Před 3 lety +1

    Thankyou so much brother

    •  Před 3 lety

      Thanks for the comment bro!

  • @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

    •  Před 4 lety

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

  • @jaircruces2789
    @jaircruces2789 Před 3 lety

    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..

    •  Před 3 lety +1

      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
      @jaircruces2789 Před 3 lety

      @ 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..

    •  Před 3 lety

      Excelente! Saludos Jair.

    • @AngelGadea
      @AngelGadea Před 3 lety

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

  • @jubacchi
    @jubacchi Před 2 lety

    Ajudou muuuuto. Obrigado.

    •  Před 2 lety

      Muchas gracias!!

  • @uancamilo
    @uancamilo Před 3 lety

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

    •  Před 3 lety

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

  • @alvarocaceres742
    @alvarocaceres742 Před 4 lety

    Excelente

    •  Před 4 lety

      Gracias Alvaro!

  • @JuliitoElegiito
    @JuliitoElegiito Před 4 lety

    excelente el video!! podrias hacer un video MVC ?

    •  Před 4 lety +3

      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.

  • @arturocoello1954
    @arturocoello1954 Před 3 lety

    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
      @arturocoello1954 Před 3 lety +2

      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:

    •  Před 3 lety

      Muchas gracias por el aporte.

  • @devgalanta3726
    @devgalanta3726 Před rokem

    Thankss!

    •  Před rokem

      Thanks!!!

  • @pepebiondi5962
    @pepebiondi5962 Před rokem

    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.

    •  Před rokem

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

  • @DragonEuby
    @DragonEuby Před 4 lety +1

    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.

    •  Před 4 lety +1

      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.
      czcams.com/video/ZHjmEWwsEzg/video.html

    • @DragonEuby
      @DragonEuby Před 4 lety

      @ 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
      @raulleyvacontreras4161 Před 3 lety

      Cual es la solución a este problema?

  • @ernestoarias3404
    @ernestoarias3404 Před 4 lety +1

    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

    •  Před 4 lety

      Gracias a vos Ernesto. Saludos!

  • @DiegoCar1971
    @DiegoCar1971 Před rokem

    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
      @DiegoCar1971 Před rokem

      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 ?

  • @velezfarak
    @velezfarak Před 2 lety

    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

    •  Před 2 lety

      Muchas gracias Carlos, fijate en el canal hay proyectos con serverside. Te paso uno. Saludos.
      czcams.com/video/lDWU6Jp0EKM/video.html

  • @carloschiroquesilva9611
    @carloschiroquesilva9611 Před 7 měsíci

    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

  • @yogeshpatel3862
    @yogeshpatel3862 Před 3 lety

    Thanks my problem solve

    •  Před 3 lety +1

      Excellent, greetings!

  • @wsintuj248
    @wsintuj248 Před 3 lety

    👍

  • @yogeshpatel3862
    @yogeshpatel3862 Před 3 lety

    From India

  • @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

    •  Před 4 lety +1

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

    • @jorgeronaldchungazapata976
      @jorgeronaldchungazapata976 Před 4 lety

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

    •  Před 4 lety +1

      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.
      czcams.com/video/QSoubKcjqo8/video.html
      czcams.com/video/o9NB7pH2i8U/video.html

    • @jorgeronaldchungazapata976
      @jorgeronaldchungazapata976 Před 4 lety

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

    • @jorgeronaldchungazapata976
      @jorgeronaldchungazapata976 Před 4 lety

      @ 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
    @commonsense4434 Před 3 lety

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

    •  Před 3 lety

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

    • @commonsense4434
      @commonsense4434 Před 3 lety

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

    •  Před 3 lety

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

    • @commonsense4434
      @commonsense4434 Před 3 lety

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

  • @kingmega8730
    @kingmega8730 Před 2 lety

    Source please

  • @edgar7936
    @edgar7936 Před 3 lety +1

    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

    •  Před 3 lety

      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
      @edgar7936 Před 3 lety

      @ Excelente, amigo! logré solucionarlo, muchas gracias

    •  Před 3 lety

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

    • @edgar7936
      @edgar7936 Před 3 lety +2

      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

    •  Před 3 lety

      Excelente Edgar!

  • @rafaelrojas1803
    @rafaelrojas1803 Před 3 lety

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

    •  Před 3 lety

      Hola Rafael, en este video explico como cambiar el idioma, entre otras cosas. Saludos.
      czcams.com/video/o9NB7pH2i8U/video.html

    • @rafaelrojas1803
      @rafaelrojas1803 Před 3 lety

      @ 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

    •  Před 3 lety

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

    • @rafaelrojas1803
      @rafaelrojas1803 Před 3 lety

      @ vale, voy a intentarlo

    • @rafaelrojas1803
      @rafaelrojas1803 Před 3 lety

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

  • @segba-caba-jorgegalati4296

    no encuentra la pàgina

  • @SrEquixs
    @SrEquixs Před 2 lety

    La descarga de tu proyecto manda a un sitio inseguro

    •  Před 2 lety

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

    • @SrEquixs
      @SrEquixs Před 2 lety

      @ Lo habias de publicar en github

    •  Před 2 lety

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

    • @davidaching1617
      @davidaching1617 Před 2 lety

      @ Hola, puedes pasar el enlace por favor