How to display dynamic data tables with Python, Flask, and Jinja2

Поделиться
HTML-код
  • Опубликовано: 8 окт 2020
  • Learn how to render HTML tables dynamically using Python and Flask! In this video, you'll learn how to take data from your Flask app and create HTML tables with it.
    If you want to learn more about Flask, check out our Flask Tutorial for Beginners playlist: • Flask Tutorial for Beg...
    -- Links --
    🐍 Our Complete Python Web Course: www.udemy.com/course/the-comp...
    ✅ Subscribe to the channel: ruclips.net/user/tecladocode?s...
    ✅ Our Discord server: / discord
    ✅ Instagram: / tecladocode
  • НаукаНаука

Комментарии • 71

  • @alicejbbennett
    @alicejbbennett 3 года назад +3

    Thanks! for some reason I had a really hard time figuring out how to do this, and an even harder time finding a useful resource explaining it. This is exactly what I needed.

  • @varunsagartheegala
    @varunsagartheegala 3 года назад +4

    Exactly what I wanted. I was thinking it will be extremely tricky. But you made it seem so easy. Loads of Thanks.

  • @pgallovich
    @pgallovich 3 года назад +6

    I’m really loving Flask even more after watching this video. This was a great intro and helped me understand Jinja2 templates. I love how they work with Flask. Now I want to implement with a database. Thank you! 🙏

    • @tecladocode
      @tecladocode  3 года назад +1

      Thank you Paul! I really like Woking with Flask and Jinja2. There’s a lot you can do!

  • @avendanod
    @avendanod 2 года назад +1

    finally, someone who speaks clearly and precisely !!! Thank you very much !!!!

  • @bilalkhann16
    @bilalkhann16 3 года назад +10

    Here is the body code:

    {% for header in headings %}
    {{ header }}
    {% endfor %}
    {% for row in data %}
    {% for cell in row %}
    {{cell}}
    {% endfor %}
    {% endfor %}

    • @bara6082
      @bara6082 2 года назад

      Thx, man. We should take it higher

  • @dzheyms
    @dzheyms 3 года назад +3

    Another great video, really like the new format. The content is straight to the point and well presented. Good work Jose.

    • @tecladocode
      @tecladocode  3 года назад

      Thanks for the feedback James, we’ll keep this format for future videos!

  • @bilalkhann16
    @bilalkhann16 3 года назад +1

    Great video. Exactly, for what I was looking for! Thankyou.

  • @tapioms
    @tapioms 3 года назад

    aún no entiendo como este tipo no tiene más susbcriptores! pero con el tiempo e de esperar que este canal estalle!!!
    Que buenos videos.

  • @godspeed2124
    @godspeed2124 3 года назад +1

    Thanks a lot for this video. Exactly what I was looking for!

  • @tecladocode
    @tecladocode  3 года назад +4

    Hope you guys enjoyed the video! Some questions were left unanswered, so here goes:
    --- Why use classes instead of targeting elements directly in CSS?
    It's to do with specificity. By always using classes instead of element or id selectors, we can make sure our CSS can be overridden easily.
    --- How did I create the HTML boilerplate so quickly?
    In VSCode, type ! and press tab, you'll get the default boilerplate.
    --- What does {% and {{ mean in Jinja2?
    {% is used to create statements, like if statements, for loops. {{ is used for interpolation (to put values into the resultant string or HTML).
    --- If you want to learn more about HTML and CSS, we've got a great course on Udemy that is getting some massive updates over the next few days. Link: www.udemy.com/course/the-complete-python-web-course-learn-by-building-8-apps/?couponCode=HTML_TABLES_FLASK
    --- I mentioned Jinja2 macros at the end. I'll be making a video on them really soon!

  • @winnieip9851
    @winnieip9851 3 года назад +1

    Yes thanks a lot. I understand Jinja2 better now

  • @robertpfaff4834
    @robertpfaff4834 2 года назад

    Thank you for a great video. I was finally able to make my table. But I wondering how can I make the content editable given that I am using flask and jinga. What do I need to add or learn? Thanks in advance for your response.

  • @mervecengiz7988
    @mervecengiz7988 2 года назад

    You speak very clearly, thank you for this tutorial. I just subscribed 🙂

  • @SonuPandey-me4fs
    @SonuPandey-me4fs 2 года назад

    Thanks it's really nice and solved my problem.... you are just awesome man! explained very well.

  • @kaelabbott
    @kaelabbott 3 года назад +6

    Great video!
    Is there away to have a live table? like to render every miliseconds the table in case my source of data changes in miliseconds.

  • @kedar09
    @kedar09 2 года назад +1

    Hi. Is there any way through which the same can be done by making use of API data? I have created my own API in flask which gives me a response in a JSON format. I don’t want to hardcode my data into a tuple/list. I’m kind of stuck. Please help. Thanks.

  • @maxwellansah6978
    @maxwellansah6978 2 года назад

    Excellent video. very precise

  • @shinigamiryuk786
    @shinigamiryuk786 3 года назад

    Thanks, Really Helpful

  • @HenryQHe
    @HenryQHe 2 года назад

    Awesome video! I'm a Python beginner writing an image processor app for fun / learning, if I want to display the processing status of each image in real-time in the HTML template, is that straightforward with Python, or is it really more of a JavaScript thing? (btw I'm using Bottle for simplicity, but seems like many of the Flask concepts apply). Thanks!

  • @reghaabraham
    @reghaabraham 3 года назад

    It's not a cliché, that was an awesome video! , didn't comment immediately, had to watch again before dropping this comment.
    In 11mins, you taught us this so powerful!
    Awesome work Jose.
    Sincerely want to be like you when I grow up 😀💪

    • @tecladocode
      @tecladocode  3 года назад +1

      Glad you liked the video Regha! You can do anything you set your mind to, but you can aim higher than being like me 😆

  • @Qualidadetodososdias
    @Qualidadetodososdias 2 года назад

    Excellent tutorial!

  • @diogodallorto1
    @diogodallorto1 3 года назад

    very helpful for who are from backend lol
    Thank you a lot!

  • @rje4242
    @rje4242 3 года назад

    absolutely brilliant! the next step is sqlalchemy methods to determine the headers/columns for a table

  • @GabrielM01
    @GabrielM01 2 года назад

    Wow, thank you so much, helped me a lot

  • @martinoneill7631
    @martinoneill7631 3 года назад

    really great video! one question regarding to the {{cell}}, when pasing in a string like"

  • @pratikpd5460
    @pratikpd5460 3 года назад

    Very nice video! Could you please suggest how to colorcode the last Salary field? if its less than 45k then yellow and more than 55k then Green?

  • @cipolletti7
    @cipolletti7 2 года назад

    Excellent video!!!

  • @paulorosado6888
    @paulorosado6888 Год назад

    Thank you very much, my friend

  • @soldadopreciso
    @soldadopreciso 3 года назад

    Thanks pal, go ahead, nice and useful tutorial. I will goto search next about retrieve data from a mysql/mariadb database , and next somthing about using asynchronous events.

  • @tolosricardos2111
    @tolosricardos2111 Год назад

    Nice video
    thank you very much

  • @elenaperez6327
    @elenaperez6327 2 года назад

    Great video, thanks a lot! Do you know how I could insert a dict value into the src of an html img tag please??? I tried this but it is not
    working

  • @manarma7536
    @manarma7536 Год назад

    That's amazing. I was Wondering if i can create a dropdown on cell level to filter the table, is it possible ?

  • @mbonuchinedu2420
    @mbonuchinedu2420 3 года назад

    Thanks teclado.

  • @selcukkok
    @selcukkok 2 года назад

    very good tutorial, I like it

  • @sujan679
    @sujan679 3 года назад

    how would you retrieve the same data back to a new python dictionary using GET, POST methods?

  • @falconxx777
    @falconxx777 3 года назад

    hellow ! How can i return data from table to flask request...??

  • @lilbuckbreaker3868
    @lilbuckbreaker3868 2 года назад

    THANK YOU BRO!!!!

  • @anand7764
    @anand7764 2 года назад

    @teclado can you pls tell how to add links in this tables column.

  • @TheRosso84
    @TheRosso84 3 года назад +1

    How do you output data like this with dictonaries?

  • @pareshgawand5375
    @pareshgawand5375 3 года назад

    Can we display bar plot on HTML file the way we display this dataset

  • @user-rf4vc7mt4d
    @user-rf4vc7mt4d 2 года назад

    I have an assignment due tomorrow and ur literally saving my ass. Like you are saving my ass. Thanks

  • @romuloalvarez007
    @romuloalvarez007 2 года назад

    Thanks for the video, could you please give some clue on how we can create a table that could be editable for the user.

  • @nickapeed
    @nickapeed 3 года назад

    Thank you! This was impressively concise… I am looking for a tutorial on building a flask application where the user can enter values in a table and the table will produce real-time calculations, like an excel spreadsheet. Do you have any suggestions?

    • @tecladocode
      @tecladocode  3 года назад +2

      Thank you very much Nick! That's a tricky one. Any interactivity on your page (e.g. making a table editable, and performing calculations more or less live) will need to use JavaScript. I'd say you're probably looking to make a JavaScript app more so than anything with Python (although you can use Python to communicate with a server and store data)

  • @nathanbustamante1479
    @nathanbustamante1479 2 года назад

    Nice Video!

  • @sizwencikana9215
    @sizwencikana9215 Год назад

    I applied the same concept on Fastapi and it worked like a charm. Big ups bro👌

  • @vibewithhaadi
    @vibewithhaadi 2 года назад

    useful, thanks

  • @godzero1995
    @godzero1995 2 года назад

    would it be very costly to have nested for loop? any better solution to fetch the table?

  • @memrecunkus404
    @memrecunkus404 3 года назад

    jinja2 code doesnt recognised by html files in pycharm. I am stuck. Can you help me?

  • @antdinodevguitar8063
    @antdinodevguitar8063 3 года назад

    Thanks for this video, i've been trying to figure this out for weeks but getting nowhere

  • @uzmapatil1045
    @uzmapatil1045 3 года назад

    i have integer values in my database, what to do?

  • @soldadopreciso
    @soldadopreciso 2 года назад

    interesting, how can we use fetch and add a search option

  • @rahulshetty3849
    @rahulshetty3849 2 года назад

    Thank you

  • @srujanayasa3672
    @srujanayasa3672 2 года назад

    How to delete a table with id given directly from html script using flask???

  • @riteshsingh2791
    @riteshsingh2791 2 года назад

    very nice

  • @sujithkumar3908
    @sujithkumar3908 3 года назад

    can i get the code for explained example gentle man ?

  • @KishorKumar-on2lw
    @KishorKumar-on2lw 2 года назад

    i am getting below error
    jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endfor'.

  • @qwalorblera293
    @qwalorblera293 Год назад

    Is it possible to create table using dictionary? I stead of tuple

  • @joseantoniosanchezarteaga9116
    @joseantoniosanchezarteaga9116 3 года назад

    as it shows the results of a linear congruncial function in a table in python web

  • @mathiashenderson4288
    @mathiashenderson4288 3 года назад

    👍 subbed

  • @user-xd3gu6vr2n
    @user-xd3gu6vr2n 3 года назад

    Спасибо.

  • @avxavx
    @avxavx 2 года назад

    where is source code in this video?2

  • @m_t_d2758
    @m_t_d2758 3 года назад

    the output on the right.... could be so much better! (Just one mans opinion)

  • @marvinlanger1155
    @marvinlanger1155 2 года назад +1

    04:57 main.py
    10:15 table.html
    11:20 styles.css