Django + DataTables: Tablas dinámicas con Django, DataTables.js y Bootstrap 5 | Ejemplo Práctico ✅

[@UskoKruM2010]

🔴 *** HOSTING RECOMENDADO *** Hostinger: : www.hostg.xyz/SHB9X ¡Usa el código USKOKRUM2010 para un buen descuento! 👨‍💻 Código Fuente: github.com/UskoKruM/django-datatables SÍGUEME ✅ ! ** Curso Udemy Bases de datos con MySQL: bit.ly/2vtrUg9 ** INSTAGRAM: instagram.com/uskokrum2010 ** FACEBOOK: facebook.com/uskokrum2010 ** TWITTER: twitter.com/uskokrum2010 ** SITIO WEB: uskokrum2010.com ** GITHUB: github.com/UskoKruM ** SUSCRÍBETE: kzbin.info 🔴 ¿Quieres aprender y conversar sobre programación? Únete a nuestro grupo de Telegram ▶ : t.me/uskokrum2010_yt Otros cursos GRATUITOS ✅ : HTML: kzbin.info/aero/PL_wRgp7nihyZElF-6dkhPU_RetfSp99QN JAVA: kzbin.info/aero/PL_wRgp7nihyZ6hKPQcioxneVQ1aTuC4fS PYTHON 3: kzbin.info/aero/PL_wRgp7nihybbJ2vZaVGI5TDdPaK_dFuC DJANGO: kzbin.info/aero/PL_wRgp7nihyZsEnudJ-XUAEdnOGUojbnn SQL SERVER: kzbin.info/aero/PL_wRgp7nihyYXeXZhOiZqKpAdwIRM28Ui C#: kzbin.info/aero/PL_wRgp7nihyYACu4RyZd0PxJUseQ2tQl8 PHP y MySQL: kzbin.info/aero/PL_wRgp7nihyYXMZ5bBP6v0Q31fRRJLiud VISUAL BASIC .NET: kzbin.info/aero/PL_wRgp7nihybLjm19HvBxRDp-ZvyGEhdh JAVASCRIPT: kzbin.info/aero/PL_wRgp7nihyYdnV6ilQcZsfdG5d2nGWkc NODE.JS: kzbin.info/aero/PL_wRgp7nihybJkFgDxd-LBZgmSIVdy3rd jQuery: kzbin.info/aero/PL_wRgp7nihyY020gyukDupJEJ84gimiPS CÓMO EDITAR CON CAMTASIA STUDIO 8: kzbin.info/aero/PL_wRgp7nihyYSbQ7Vbwh5TFbM5nOgriAm CÓMO USAR ZOOM PARA CLASES VIRTUALES: kzbin.info/aero/PL_wRgp7nihyaNTSqIvKvJtBA-6Qw-UKTU

[@diegodaliosorio236]

Veo cientos de videos, pero UskoKruM2010 explica demasiado bien y eso que a hoy día no he visto los videos de JS, pero los voy a ver.

[@UskoKruM2010]

¡Gracias, Diego! Espero que sigas aprendiendo en mi canal. 🙌

[@miguelangelcordovaledezma6113]

Simplemente sobervio el contenido, explicación. Etc,etc, bravo . Te voy a seguir.

[@UskoKruM2010]

¡Muchas gracias, Miguel Angel! Me alegra saber eso. 🤝

[@conocimientointerior]

excelente tutorial, muy bien explicado y además incluye en su explicación los trucos. Muy agradecido.

[@UskoKruM2010]

¡Excelente! Me alegra saber que te ha servido. 👋

[@DANNYAGUILARGIL]

Excelente video, me gustaria ver la continuidad con el CRUD dentro del datatable.

[@UskoKruM2010]

¡Buena idea! Lo traeré próximamente, Danny. 😊 🙌

[@DANNYAGUILARGIL]

@@UskoKruM2010 Explicas genial amigo, muchas gracias por compartir tu conocimiento y esperando la continuidad del CRUD dentro del datatable con un modal de boostrap seria genial :D

[@UskoKruM2010]

@@DANNYAGUILARGIL ¡Excelente, Danny! Me alegra saber eso. 😊

[@sebastianmelogarcia6016]

Esto si es contenido de calidad bro!!!. Realmente me has ayudado demasiado👏

[@UskoKruM2010]

¡Excelente, Sebastián! Un saludo para ti. ✌

[@cipolletti7]

Vuelvo a agradecerte, porque realmente este video es fantástico. Me ayudó mucho. Muchas gracias!

[@UskoKruM2010]

¡Que alegría, amigo Bruno! 🙌

[@Fernandocasella-v3r]

amigo, si esto llega a ser tan facil como lo haces parecer, me estas salvando la vida, tengo errores por todos lados con flask y sus librerias y sus versiones, mañana espero poder realizar mi proyecto con django,

[@UskoKruM2010]

¡Claro! Es así de fácil, mientras más practiques más fácil será! También tengo videos de Django en mi canal. 😊

[@cipolletti7]

Excelente video Oscar! Realmente es muy útil para todos los que estamos aprendiendo. Muchas gracias por tu contenido 👏🏽👏🏽👍🏽👍🏽

[@UskoKruM2010]

¡Gracias por apreciar mi trabajo, amigo Bruno! 😊 🙌

[@YeisonAdm]

Muy buen curso, excelente contenido.

[@UskoKruM2010]

¡Gracias, Yeison! Me alegra saber eso. 🎉

[@mrtutzee]

Muchas gracias!

[@UskoKruM2010]

¡Gracias a ti por apreciar mi trabajo! 🎉

[@neckochaos]

Muy buen video, me ha costado encontrar material de calidad sobre Django y se me había hecho un poco cuesta arriba la verdad, muy buen video y muy claro y agradable el como enseñas, gracias me ayudo mucho, lo único que podría sugerir y solo si es que no es problema de mi pc es pensar en mejorar la calidad de video, por alguna razón lo tengo a 1080 y aun así veo pixeladas algunas letras. (si no le sucede a nadie mas entonces no tomes en consideración eso ultimo)

[@UskoKruM2010]

Ok, amigo! Gracias, tomaré en cuenta tu consejo. Muy agradecido por tu apoyo. 😊 👋

[@pablo20237]

Very excellent project, thank you

[@UskoKruM2010]

¡Thanks you! 🎉

[@system.deploy]

Excelente video saludos.

[@UskoKruM2010]

¡Gracias por apreciar mi trabajo, Luis Angel! 🙌

[@jrvega79]

muy buen video.

[@UskoKruM2010]

¡Excelente! Me alegra mucho saber que mi trabajo te ha servido. 🙌 🎉

[@mauroezequielbravo]

Para el tema de ver el json formateado en el navegador. Si abren la URL con Firefox se formatea sin necesidad de tener una extencion.

[@UskoKruM2010]

¡Gracias por el apoyo, Mauro! 🙌

[@MarioYaranga]

Hola, gracias por el video. Se puede hacer que la tabla sea editable en línea? Es decir en la misma celda? Y también seleccionar para editar varios registros a la vez?

[@UskoKruM2010]

Si, se puede, voy a anotarme esa idea para un futuro video, mientras tanto podrías investigar cómo hacerlo. 🙌

[@erickdanielhernandezpalma7395]

excelente video amigo, te empece a seguir, gracis por compartir tu conocimiento, tengo una pregunta, como es el setup del await fetch con MVC en C# ? eh realizado varios experimientos en base respuestas de otros foros pero ninguna me resulta con exito, basicamente es hacer el CALL al metodo dentro del controlador en este caso para una tabla sin especificar parametro de entrada, seria solo renderizar la DATA tal cual de la tabla , el ultimo testeo que realice fue de esta manera const request = new Request(`@Url.Action("Main", "Listar")`); , sin embargo no se si la sintaxis es incorrecta porque no me marca errores y se ve legible como para lectura me podrias ayudar? de antemano muchas gracias

[@UskoKruM2010]

Pues sí, sé como hacerlo, pero lo traeré en un futuro video, por ahora no, si deseas clases particulares si podemos coordinarlo: uskokrum2010.com/public/contacto

[@erickdanielhernandezpalma7395]

@@UskoKruM2010 claro que si me interesa, muchas gracias, ya te mande mensaje por medio de tu plataforma para poder agendar clases saludos coordiales

[@UskoKruM2010]

@@erickdanielhernandezpalma7395 ¡Excelente! 🙌🙌

[@juanfranciscolago4027]

Muy bueno el vídeo! La duda que tengo es como se podría hacer que por ejemplo en caso de que se agregue un programador en la base de datos se actualice en la tabla. Como por ejemplo volver a hacer la consulta a la base de datos con js

[@UskoKruM2010]

Si, claro, no tengo exactamente eso que pides pero si la forma de hacerlo: kzbin.infoqgf0UYzL5BY?feature=share ✅ con este video podrás hacerlo investigando un poco.

[@juanfranciscolago4027]

@@UskoKruM2010 muchísimas gracias!

[@UskoKruM2010]

@@juanfranciscolago4027

[@moisesparionacahuana5452]

Maestro muy agradecido por sus invaluables videos dobre django y data tables. Por favor unaconsulta como podria implementar botones de editar y eliminar asi como su tutorial de CRUD con django, para que se lancen con un modal y terminar realizando la acción. le agradesco ya por su amable respuesta.

[@UskoKruM2010]

¡Gracias por tu apreciación, Moisés! Pues, tengo esa idea para un futuro tutorial, espero traerlo pronto para que te pueda servir. 😊

[@esneicercrack6041]

Una pregunta datables se puede unas con una base de datos de mysql sin usar un jsom

[@UskoKruM2010]

Claro que sí, se puede integrar sin problemas. 🤗

[@ivansolis178]

Nuevo subscriptor estaría interesante complementarlo con un crud completo

[@UskoKruM2010]

¡Gracias, Iván! Lo tendré en cuenta 😊 🙌

[@julius_2365]

Hola, excelente contenido, me agrada mucho tu explicación. Por otro lado, quisiera hacer una pregunta. En la ultima parte donde agregas los botones, como los haría funcionales? Mi pregunta surge porque tengo un CRUD ya con una base de datos hecha, pero como soy nuevo en esto, no se si bastaría con colocar un href por ahí acomodadito dentro del html Saludos y nuevamente excelente contenido

[@UskoKruM2010]

Pues, haré un video explicándolo detalladamente, pero mientras tanto te puedo comentar que se hacce mediante el manejo de eventos de JavaScript. 🙌

[@julius_2365]

​@@UskoKruM2010 De acuerdo, esperaré con ansias dicho video. Gracias por responder. Saludos

[@UskoKruM2010]

@@julius_2365

[@ulisespallares8]

sHola muy bueno el video te consulto algo, ¿qué pasa si tenes una lista de 100 mil programadore? le pasa las 100 mil filas al cliente (buscador) así de una sola pasada ? eso es eficiente? Soy nuevo en esto.

[@UskoKruM2010]

¡Hola! Muy buena pregunta, no es recomendable hacer eso, lo mejor es utilizar una paginación dinámica, voy a traer un video de ello próximamente en mi canal. 😊

[@ulisespallares8]

@@UskoKruM2010 Sí, estuve leyendo justo eso muchas gracias.Tremendo canal.

[@UskoKruM2010]

@@ulisespallares8 ¡Gracias! 🎉🎉

[@kosmokramer6299]

​@@UskoKruM2010 hermano felicitaciones por el canal, tienes conocimiento y pedagogía impresionantes, con respecto a la paginación dinámica puedes dar alguna pista por acá para investigarlo, gracias por todo

[@UskoKruM2010]

@@kosmokramer6299 ¡Gracias! Me da gusto saber eso. Para paginación dinámica traeré un video próximamente. 😊

[@lozadaca]

Excelente video, ¿Que opinas de fastapi? ¿Es la mejor alternativa para hacer backend con python(Crear API rest)?

[@UskoKruM2010]

Es una muy buena alternativa, traeré un video sobre FastAPI pronto, estate atento. 😊

[@juancarlosoliveragomez5469]

¿Se puede poner por defecto la ruta "app/" sin la necesidad de colocar en la url del navegador?

[@UskoKruM2010]

Si, se puede establecer eso en el archivo 'urls.py'. ✔

[@WESJAPAN-xy3ch]

Felicitaciones excelente video! Será posible que nos enseñes como hacer esto mismo en googlesheet? Pendiente de tus comentarios!!!

[@UskoKruM2010]

¡Gracias! Pues si, puedo anotarlo como una futura idea de video. 🤝

[@sr.bolita2332]

Excelente video uwu

[@UskoKruM2010]

¡Gracias por apreciar mi trabajo, Sr. Bolita! 👏

[@nehomarjosegoyogimenez2944]

maestro una consulta...como podría mantener una búsqueda y al actualizar lnapagina se mantenga el filtro...? alguna idea ..

[@UskoKruM2010]

Uhmm interesante pregunta, quizás guardarlo en localStorage, allí podrás leer el valor nuevamente y asignarlo donde corresponda. 🤗

[@tuplaylist4218]

Cómo hacer funcionar el crud de eliminar y buscar ?

[@UskoKruM2010]

Lo haré en un futuro video, con todas las operaciones, espero tener el apoyo suficiente. 🙌

[@cipolletti7]

Una sola consulta, es posible cambiarle el idioma al datatable, para que por ejemplo, el buscar sea buscar en vez de "Search", o el "entries" de registros. Muchas gracias!

[@UskoKruM2010]

Claro, lo expliqué aquí: kzbin.infoo4ByxKlcZHY?feature=share ✅

[@felipevargas6497]

Muchas gracias por compartir estos cursos tan bien elaborados y claros. He aprendido bastante y estoy muy motivado para seguir con este tema. Desafortunadamente quedé bloqueado una vez adicionamé: En index.html En index.js tableBody_programmers.innerHTML = content; Parece que en mi equipo hay algo mal configurado pues al actualizar la página me muestra el error: ReferenceError: tableBody_programmers is not defined Si me puede dar alguna pista para solucionar el problema se lo agradecería muchisimo.

[@UskoKruM2010]

Comprendo, te recomiendo que veas el código fuente de este curso, lo encontrarás en la descripción del video. 🤝

[@felipevargas6497]

@@UskoKruM2010 mil gracias. Seguiré tus sugerencias.

[@UskoKruM2010]

@@felipevargas6497

[@misaelarciniega5894]

cual es el limite de tablas que se podrian añadir para que no cargue lento?

[@UskoKruM2010]

¿Tablas? Las que quieras, pero si tienes demasiados registros te recomendaría un proceso de paginación y cargar los datos de forma dinámica (progresiva). 💪

[@misaelarciniega5894]

@@UskoKruM2010 tendras algun tutorial sobre eso? soy bastante nuevo en esto

[@UskoKruM2010]

​@@misaelarciniega5894 Todavía no, pero lo tengo anotado para grabarlo. 👋

[@franciscodariorodriguezsam6421]

y como definiria la url static para que me elimine o actualice por medio del id ? aun no logro hacerlo

[@UskoKruM2010]

Uhmm no sé a que te refieres exactamente, Francisco. 👀

[@nelsonjoseguidabria9194]

Brother muy bueno el video pero tengo una duda. Si o si para que funcione ok datatables hay que pasarle los datos de la BD en formato JSON ? es decir no se pueden pasarle los datos desde DJANGO a un archivo html formateado con JINJA y que datatables trabaje desde ahi ? Saludos

[@UskoKruM2010]

¡Saludos, amigo! Pues realmente no se le pasa un JSON, se crea la tabla con elementos planos (como textos o números) y luego se construye la tabla a través de la librería, espero que ese concepto te haya quedado claro. 🙌

[@nelsonjoseguidabria9194]

​@@UskoKruM2010 No entiendo, si en tu function view de django pusiste un "return JsonResponse". No seria que le estas pasando los datos en formato JSON ?

[@UskoKruM2010]

@@nelsonjoseguidabria9194 Si, pero al llegar a JavaScript se convierten en un arreglo nativo de objetos. 😊

[@JG-sz7bu]

muy buen video, pero seria bueno que le dieras funcionalidad a los botones de editar y eliminar , trate de hacerlo y no me reconoce el id para poder editarlo y eliminarlo.

[@UskoKruM2010]

Ujum, lo tengo pensado para un próximo video, gracias! 🤗

[@MateoAmariles]

Amigo como solucionaste lo del id?

[@jazo2212]

Hola estimado, podrías hacer un video de DataTables pero importando registros de un archivo Excel y con esos registros en el DataTables también que se muestre en un grafico. Ese tipo de videos todavía no se observa en KZbin. Gracias

[@UskoKruM2010]

Uhmm si podría, pero ya tengo todo eso dividido en más de 1 video, sería cuestión de que integres dicho conocimiento (como parte de tu aprendizaje). 🤝

[@jazo2212]

@@UskoKruM2010 Disculpa revise tu canal, y me cuesta identificar esos videos a lo que haces mención. Porfa, podrías indicar cuales serian esos videos o enviar esos enlaces?

[@UskoKruM2010]

@@jazo2212 Exacto, serían estos: kzbin.info/www/bejne/pGKZe6J_r5p5h9U | kzbin.info/www/bejne/oXWaY2mupLeDhck

[@jazo2212]

@@UskoKruM2010 Hola estimado me refería usando JavaScript. Creo que seria interesante convertir registros de un archivo de Excel en JSON, usando JavaScript estos mostrarlo en un DataTable (también puede ser en vez de DataTable que se arme una tabla de registros con html) que este vinculado a unos Graficos, al interactuar con el filtro del DataTable estos también hagan que se modifique en los Gráficos

[@UskoKruM2010]

@@jazo2212 Uhmm no sé si se podrá nativamente con JavaScript, no es la especialidad de dicho lenguaje (en el backend con Node.js si sería posible). ✅✅

[@memi7387]

Hola, podrías explicar como hacer eso pero utilizando mas de una tabla

[@UskoKruM2010]

Claro, lo haré en un siguiente video, ¡muchas gracias! 😊

[@javiernancob]

hola, segui tu video pero no puedo hacer que me aparezca el sorting de las tablas ni el buscar, la diferencia prinicipal es que estoy trabajando con una aplicacion de django llamada website y ademas trabajo con plantillas base. que cambios deberia hacer?

[@UskoKruM2010]

Uhmm pues, no muchos quizás, tendría que revisar tu código para poder identificar el problema, simplemente adivinar no sería la mejor alternativa. 🤔

[@javiernancob]

​@@UskoKruM2010 ya lo solucioné, muchas gracias me ayudo mucho tu video

[@UskoKruM2010]

@@javiernancob

[@sebastianignaciosantillan2454]

si no se especifica otra cosa con col-12 las demas pantallas heredan ese tamaño. No es necesario col-sm-12 col-md-12 col-lg-12 col-xl-12

[@UskoKruM2010]

¡Muchas gracias por el aporte, amigo Sebastián! 😊

[@byronbarco3947]

que pasaría si los datos superan los 10000 es recomendable hacer de esta manera

[@UskoKruM2010]

Uhm nop, lo recomendable es utilizar paginación, para poder cargar una X cantidad de registros a la vez. 👌

[@andyaravasconcelos380]

Muy buen video, una duda quiero crear funciones de pivot table, es posible? Por ejemplo, quiero que salga la suma de programers que tienen score más alto que 7, y vivan en México. Literalmente poder aplicar funciones de una tabla dinámica de Excel (Pivot table), es posible? Pregunto porque estoy creando un sistema de registro y van a tener millones de personas, así que quería presentar informes consolidados mesclando dos tipos de data: Ex cuantas personas con edad de 0-10 son hombres, cuantas son mujeres etc

[@UskoKruM2010]

No, me temo que no hasta donde yo sé, te recomendaría realizar consultas a tu base de datos directamente para traer dichos valores calculados. 😊

[@juancarlosmejiaquezada9926]

Buenas tardes Hermano soy Juan Carlos Mejia Quezada de Republica Dominicana necesito un favor estoy diseñando un sistema de registro de daros y y tengo un campo UNIQUE, para cuando registe el numero de ID de las personas si existe no lo registre, pero quiero que envie un mensaje de error cuando se intente introducir un registro que ya existe, pero me da el siguiente error 'WSGIRequest' object has no attribute 'is_ajax' a ver si me puede ayudar por favor

[@UskoKruM2010]

Uhmm amigo, necesitaría analizar tu proyecto de forma completa para poder orientarte, sólo con texto me es muy difícil. 👀

[@juancarlosmejiaquezada9926]

@@UskoKruM2010 podemos hacer una conexión con anydesk cuando tú lo disponga

[@UskoKruM2010]

@@juancarlosmejiaquezada9926 Uhmm mejor te recomiendo que te unas a mi grupo de Telegram y pidas ayuda allí, yo no dispongo de mucho tiempo ahora, lo siento 😥

[@juancarlosmejiaquezada9926]

@@UskoKruM2010 Ok. Hermano, gracias de todas 🙏🏾, ya el sistema está listo solo me da ese error, disculpa la molestia

[@UskoKruM2010]

@@juancarlosmejiaquezada9926 No te preocupes 😊

[@nameteGM]

solo te falto hacerlo responsive

[@UskoKruM2010]

¡Así es! Aunque no puedo cubrir todo en un video, pero seguro con mis otros tutoriales podrás hacerlo. ✌

[@nameteGM]

@@UskoKruM2010 ya consegui hacerlo ahora busco websockets, tenes?

[@UskoKruM2010]

@@nameteGM Nop, no por ahora 👀

[@gersalina2]

Que pena que continues usando vistas basadas en funciones y no en clases a estas alturas.

[@UskoKruM2010]

¿Por qué que pena? Son opciones que hay y personalmente son las que más me gustan para trabajar, es muy parecido a Node.js con Express por ejemplo, es cuestión de gustos y de orden del código claro! No veo el problema :)

[@UskoKruM2010]

Si tú deseas puedes cambiar esa lógica de funciones a clases, no es el problema en este caso porque el video se enfoca en cómo proveer datos al frontend y crear DataTables con ello. 😊

[@gersalina2]

@@UskoKruM2010 Pensé que hacerlo basado en clases nos aportaba una mayor modularidad. Sdos cordiales.

[@gersalina2]

@@UskoKruM2010 Gracias como siempre por responder, trataré y lo compartiré.

[@UskoKruM2010]

@@gersalina2 Claro que sí, amigo, me alegra que te haya servido.

[@YEINS9609]

Hola muchas gracias por el contenido, me puedes ayudar por favor con este error, al entrar al navegador en mi pagina index y al abrir la consola me sale este error y no he podido solucionarlo content_script.js:30873 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'allowRunFromHttpSchema') at removeBodyMarkIfNecessary (content_script.js:30873:19) at content_script.js:30837:12 removeBodyMarkIfNecessary @ content_script.js:30873 (anonymous) @ content_script.js:30837 Promise.then (async) init @ content_script.js:30836 (anonymous) @ content_script.js:31019 (anonymous) @ content_script.js:31020 (anonymous) @ content_script.js:31022

[@UskoKruM2010]

¡Saludos! La única forma de saludarte sería revisar tu código (en una clase privada quizás), me puedes contactar por mi página web. ✅