Django + DataTables: Tablas dinámicas con Django, DataTables.js y Bootstrap 5 | Ejemplo Práctico ✅
Vložit
- čas přidán 29. 01. 2023
- Combina Django con DataTables: aprende a utilizar la librería DataTables.js para crear tablas dinámicas y mostrar datos leídos desde una aplicación backend (API) creada con Python y Django. Cónoce cómo utilizar el framework web Django para proveer datos que se mostrarán en una DataTable (usando el plugin DataTables.js de jQuery).
#django #datatables #bootstrap
🔴 ** HOSTING RECOMENDADO **
Hostinger: www.hostinger.com/uskokrum2010
¡Usa el código USKOKRUM2010 para un buen descuento!
👨💻 Código Fuente: github.com/UskoKruM/django-da...
SÍGUEME ✅ !
** Curso Udemy Bases de datos con MySQL: bit.ly/2vtrUg9
** INSTAGRAM: / uskokrum2010
** FACEBOOK: / uskokrum2010
** TWITTER: / uskokrum2010
** SITIO WEB: uskokrum2010.com
** GITHUB: github.com/UskoKruM
** SUSCRÍBETE: / uskokrum2010
🔴 ¿Quieres aprender y conversar sobre programación? Únete a nuestro grupo de Telegram ▶ : t.me/uskokrum2010_yt
Otros cursos GRATUITOS ✅ :
HTML: • Curso de HTML desde 0 ...
JAVA: • Curso de Java desde 0 ...
PYTHON 3: • Curso de Python 3 desd...
DJANGO: • Curso Django desde 0 🦄...
SQL SERVER: • Curso de SQL Server de...
C#: • Curso de C# (C Sharp) ...
PHP y MySQL: • Curso de PHP y MySQL d...
VISUAL BASIC .NET: • Curso de Visual Basic ...
JAVASCRIPT: • Curso de JavaScript de...
NODE.JS: • Curso Node.js desde 0 ...
jQuery: • Curso jQuery desde 0 🌐...
CÓMO EDITAR CON CAMTASIA STUDIO 8: • CÓMO UTILIZAR CAMTASIA...
CÓMO USAR ZOOM PARA CLASES VIRTUALES: • Cómo Usar ZOOM Para CL...
datatables
datatables.js
django con datatables
usar datatables con django
django + datatables
crear datatable con django
datatables python
datatables html
datatables plugin
como usar datatables
crear datatables
datatables javascript
datatables bootstrap
datatables instalacion
utilizar datatables
datatables django
datatables idioma
datatables español
datatables controles
datatables paginación
tablas con paginación
bootstrap
bootstrap5
bootstrap twitter
bootstrap css
uskokrum2010 - Věda a technologie
🔴 *** 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: czcams.com/users/uskokrum2010
🔴 ¿Quieres aprender y conversar sobre programación? Únete a nuestro grupo de Telegram ▶ : t.me/uskokrum2010_yt
Otros cursos GRATUITOS ✅ :
HTML: czcams.com/play/PL_wRgp7nihyZElF-6dkhPU_RetfSp99QN.html
JAVA: czcams.com/play/PL_wRgp7nihyZ6hKPQcioxneVQ1aTuC4fS.html
PYTHON 3: czcams.com/play/PL_wRgp7nihybbJ2vZaVGI5TDdPaK_dFuC.html
DJANGO: czcams.com/play/PL_wRgp7nihyZsEnudJ-XUAEdnOGUojbnn.html
SQL SERVER: czcams.com/play/PL_wRgp7nihyYXeXZhOiZqKpAdwIRM28Ui.html
C#: czcams.com/play/PL_wRgp7nihyYACu4RyZd0PxJUseQ2tQl8.html
PHP y MySQL: czcams.com/play/PL_wRgp7nihyYXMZ5bBP6v0Q31fRRJLiud.html
VISUAL BASIC .NET: czcams.com/play/PL_wRgp7nihybLjm19HvBxRDp-ZvyGEhdh.html
JAVASCRIPT: czcams.com/play/PL_wRgp7nihyYdnV6ilQcZsfdG5d2nGWkc.html
NODE.JS: czcams.com/play/PL_wRgp7nihybJkFgDxd-LBZgmSIVdy3rd.html
jQuery: czcams.com/play/PL_wRgp7nihyY020gyukDupJEJ84gimiPS.html
CÓMO EDITAR CON CAMTASIA STUDIO 8: czcams.com/play/PL_wRgp7nihyYSbQ7Vbwh5TFbM5nOgriAm.html
CÓMO USAR ZOOM PARA CLASES VIRTUALES: czcams.com/play/PL_wRgp7nihyaNTSqIvKvJtBA-6Qw-UKTU.html
Excelente video, me gustaria ver la continuidad con el CRUD dentro del datatable.
¡Buena idea! Lo traeré próximamente, Danny. 😊 🙌
@@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
@@DANNYAGUILARGIL ¡Excelente, Danny! Me alegra saber eso. 😊
Esto si es contenido de calidad bro!!!. Realmente me has ayudado demasiado👏
¡Excelente, Sebastián! Un saludo para ti. ✌
Vuelvo a agradecerte, porque realmente este video es fantástico. Me ayudó mucho. Muchas gracias!
¡Que alegría, amigo Bruno! 🙌
Simplemente sobervio el contenido, explicación. Etc,etc, bravo . Te voy a seguir.
¡Muchas gracias, Miguel Angel! Me alegra saber eso. 🤝
Excelente video Oscar! Realmente es muy útil para todos los que estamos aprendiendo. Muchas gracias por tu contenido 👏🏽👏🏽👍🏽👍🏽
¡Gracias por apreciar mi trabajo, amigo Bruno! 😊 🙌
excelente tutorial, muy bien explicado y además incluye en su explicación los trucos. Muy agradecido.
¡Excelente! Me alegra saber que te ha servido. 👋
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.
¡Gracias, Diego! Espero que sigas aprendiendo en mi canal. 🙌
Muy buen curso, excelente contenido.
¡Gracias, Yeison! Me alegra saber eso. 🎉
Very excellent project, thank you
¡Thanks you! 🎉
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.
¡Gracias por el apoyo, Mauro! 🙌
Excelente video saludos.
¡Gracias por apreciar mi trabajo, Luis Angel! 🙌
Muchas gracias!
¡Gracias a ti por apreciar mi trabajo! 🎉
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,
¡Claro! Es así de fácil, mientras más practiques más fácil será! También tengo videos de Django en mi canal. 😊
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)
Ok, amigo! Gracias, tomaré en cuenta tu consejo. Muy agradecido por tu apoyo. 😊 👋
Excelente video uwu
¡Gracias por apreciar mi trabajo, Sr. Bolita! 👏
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.
¡Gracias por tu apreciación, Moisés! Pues, tengo esa idea para un futuro tutorial, espero traerlo pronto para que te pueda servir. 😊
Felicitaciones excelente video! Será posible que nos enseñes como hacer esto mismo en googlesheet? Pendiente de tus comentarios!!!
¡Gracias! Pues si, puedo anotarlo como una futura idea de video. 🤝
Excelente video, ¿Que opinas de fastapi? ¿Es la mejor alternativa para hacer backend con python(Crear API rest)?
Es una muy buena alternativa, traeré un video sobre FastAPI pronto, estate atento. 😊
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?
Si, se puede, voy a anotarme esa idea para un futuro video, mientras tanto podrías investigar cómo hacerlo. 🙌
Nuevo subscriptor estaría interesante complementarlo con un crud completo
¡Gracias, Iván! Lo tendré en cuenta 😊 🙌
maestro una consulta...como podría mantener una búsqueda y al actualizar lnapagina se mantenga el filtro...? alguna idea ..
Uhmm interesante pregunta, quizás guardarlo en localStorage, allí podrás leer el valor nuevamente y asignarlo donde corresponda. 🤗
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
Pues, haré un video explicándolo detalladamente, pero mientras tanto te puedo comentar que se hacce mediante el manejo de eventos de JavaScript. 🙌
@@UskoKruM2010 De acuerdo, esperaré con ansias dicho video. Gracias por responder. Saludos
@@julius_2365
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!
Claro, lo expliqué aquí: czcams.com/users/liveo4ByxKlcZHY?feature=share ✅
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
Si, claro, no tengo exactamente eso que pides pero si la forma de hacerlo: czcams.com/users/liveqgf0UYzL5BY?feature=share ✅ con este video podrás hacerlo investigando un poco.
@@UskoKruM2010 muchísimas gracias!
@@juanfranciscolago4027
Una pregunta datables se puede unas con una base de datos de mysql sin usar un jsom
Claro que sí, se puede integrar sin problemas. 🤗
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
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
@@UskoKruM2010 claro que si me interesa, muchas gracias, ya te mande mensaje por medio de tu plataforma para poder agendar clases
saludos coordiales
@@erickdanielhernandezpalma7395 ¡Excelente! 🙌🙌
¿Se puede poner por defecto la ruta "app/" sin la necesidad de colocar en la url del navegador?
Si, se puede establecer eso en el archivo 'urls.py'. ✔
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
¡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. 🙌
@@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 ?
@@nelsonjoseguidabria9194 Si, pero al llegar a JavaScript se convierten en un arreglo nativo de objetos. 😊
y como definiria la url static para que me elimine o actualice por medio del id ?
aun no logro hacerlo
Uhmm no sé a que te refieres exactamente, Francisco. 👀
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
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. 😊
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.
Comprendo, te recomiendo que veas el código fuente de este curso, lo encontrarás en la descripción del video. 🤝
@@UskoKruM2010 mil gracias. Seguiré tus sugerencias.
@@felipevargas6497
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?
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. 🤔
Cómo hacer funcionar el crud de eliminar y buscar ?
Lo haré en un futuro video, con todas las operaciones, espero tener el apoyo suficiente. 🙌
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.
Ujum, lo tengo pensado para un próximo video, gracias! 🤗
Amigo como solucionaste lo del id?
Hola, podrías explicar como hacer eso pero utilizando mas de una tabla
Claro, lo haré en un siguiente video, ¡muchas gracias! 😊
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
¡Muchas gracias por el aporte, amigo Sebastián! 😊
cual es el limite de tablas que se podrian añadir para que no cargue lento?
¿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). 💪
@@UskoKruM2010 tendras algun tutorial sobre eso? soy bastante nuevo en esto
@@misaelarciniega5894 Todavía no, pero lo tengo anotado para grabarlo. 👋
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.
¡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. 😊
@@UskoKruM2010 Sí, estuve leyendo justo eso muchas gracias.Tremendo canal.
@@ulisespallares8 ¡Gracias! 🎉🎉
@@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
@@kosmokramer6299 ¡Gracias! Me da gusto saber eso. Para paginación dinámica traeré un video próximamente. 😊
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
Uhmm amigo, necesitaría analizar tu proyecto de forma completa para poder orientarte, sólo con texto me es muy difícil. 👀
@@UskoKruM2010 podemos hacer una conexión con anydesk cuando tú lo disponga
@@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 😥
@@UskoKruM2010 Ok. Hermano, gracias de todas 🙏🏾, ya el sistema está listo solo me da ese error, disculpa la molestia
@@juancarlosmejiaquezada9926 No te preocupes 😊
que pasaría si los datos superan los 10000 es recomendable hacer de esta manera
Uhm nop, lo recomendable es utilizar paginación, para poder cargar una X cantidad de registros a la vez. 👌
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 CZcams.
Gracias
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). 🤝
@@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?
@@jazo2212 Exacto, serían estos: czcams.com/video/n16JoIz5FQs/video.html | czcams.com/video/kD726xoRPOg/video.html
@@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
@@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). ✅✅
Que pena que continues usando vistas basadas en funciones y no en clases a estas alturas.
¿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 :)
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. 😊
@@UskoKruM2010 Pensé que hacerlo basado en clases nos aportaba una mayor modularidad. Sdos cordiales.
@@UskoKruM2010 Gracias como siempre por responder, trataré y lo compartiré.
@@gersalina2 Claro que sí, amigo, me alegra que te haya servido.
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
¡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. ✅