Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Building a Bootstrap table with dynamic elements in Flask

I'm working with Flask on building a Bootstrap table out of a list of people taken from a SQLAlchemy database. However, the information I want to put in the table is appearing above it.

Here's the code in question:

<!DOCTYPE html>

{% extends "base.html" %}

{% block page_content %}
<div class="page-header">
    <h1>componentes familiares</h1>
        <table class="table">
            <thead>
                <th>name</th>
                <th>age</th>
                <th>option</th>
            </thead>
            <tbody>
                {% for person in people %}
                    <tr>{{ person.name }}</tr>
                    <tr>{{ person.age }}</tr>
                    <tr>{{ person.option }}</tr>
                {% endblock %}
            </tbody>
        </table>
{% endblock %}

(This is already a slimmed-down version, since I kept taking stuff off to see if it would solve the problem.)

But let's say I have two persons in my database, Alice, and Bob. Alice is 30 and Bob is 40, Alice's option is 1 and Bob's is 2. This is what I get:

enter image description here

The information is there, but it's rendered above the table. And right below it comes the table header and an empty table row.

Links

I found another question about Bootstrap tables in Flask here, but it didn't really solve my problem. My data is being passed to the html page exactly as I want it, I just want to put it in a table.

I also found Flask-Table, an extension to build the table in Python and then using it. It may end up being a solution, but I still don't see what's wrong with my code.

Didn't find anything useful in the Bootstrap docs either.

Any help greatly appreciated!

like image 812
Lucas Murtinho Avatar asked Sep 25 '15 03:09

Lucas Murtinho


People also ask

Can Bootstrap be used with Flask?

You can install Flask's Bootstrap dependency with pip install flask-bootstrap in your terminal. However, using flask-bootstrap can limit the control you have over the styling and design of your website. It also has documentation here, and for the documentation specific to flask-bootstrap, go here.

How do I display data in Excel HTML using python Flask?

PART 2) FLASK SERVER Serve the “Excel to HTML” demo page – Open s1_dummy. xlsx , select the required workbook and pass it into the HTML template. Captain Obvious at your service. Start running the Flask server.


1 Answers

You're missing a few <tr> and <td> tags:

<table class="table">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>option</th>
        <tr>
    </thead>
    <tbody>
        {% for person in people %}
        <tr>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.option }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

You're aiming for a table-row (<tr>) per user, and some table-data (<td>) for each of their attributes. You've also got a {% endblock %} where you should have an {% endfor %}.

like image 72
Doobeh Avatar answered Sep 23 '22 19:09

Doobeh