Building a Bootstrap table with dynamic elements in Flask - python

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:
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!

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

Related

If statement in table in django-templates

say we have table in template
<table class="table">
<thead>
<tr>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for student in students %}
<tr>
{% if {{student.academic_status}}=="promoted" %}
<td class=text-success>promoted</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
So is it possible using if statement in table in django-templates
Since you are already in a template tag, you should not use curly brackets ({{ … }}) for the variable, so:
{% if student.academic_status == "promoted" %}
…
{% endif %}
The correct way to add if statement in Django Templates
follow me !
if statement
{% if condition %}
{{here you add the key that you using in the views page exactly context}}
{% endif %}

non repeating th for each table row

is there a way to remove the repeated th for each row?
I only want it to show at the top of the table, and not repeat for each row that I import from psql. I've searched and tried several options, but none seem to work for me. I'm using Flask and SQLAlchemy to connect to a postgre table. (the table is called injection)
This is part of my code:
{% block contents %}
<h1>Injection Data</h1>
{% for inject in injection %}
<table>
<tr>
<th>Timestamp</th>
<th>Cage Identifier</th>
<th>Ear Notch Number</th>
<th>Age</th>
<th>Date of Birth</th>
<th>Strain</th>
</tr>
<tr>
<td>{{inject.Timestamp}}</td>
<td>{{inject.Cage_Identifier}}</td>
<td>{{inject.Ear_Notch_Number}}</td>
<td>{{inject.Age}}</td>
<td>{{inject.DOB}}</td>
<td>{{inject.Strain}}</td>
</tr>
</table>
{% endfor %}
{% endblock contents %}
However, the column headers th will repeat for each row of data that is imported from the postgre table.
Your <th> and <table> must not be in loop only <tr><td></td></tr> needs to be in loop,
like below.
{% block contents %}
<h1>Injection Data</h1>
<table>
<tr>
<th>Timestamp</th>
<th>Cage Identifier</th>
<th>Ear Notch Number</th>
<th>Age</th>
<th>Date of Birth</th>
<th>Strain</th>
</tr>
{% for inject in injection %}
<tr>
<td>{{inject.Timestamp}}</td>
<td>{{inject.Cage_Identifier}}</td>
<td>{{inject.Ear_Notch_Number}}</td>
<td>{{inject.Age}}</td>
<td>{{inject.DOB}}</td>
<td>{{inject.Strain}}</td>
</tr>
{% endfor %}
</table>
{% endblock contents %}

How to create unknown numbers of HTML tables

I am trying to render a table using Django-Python. Let us say I have a record of last names starting from A-Z. Now, I want to create a table based on each letter, and put all the people with that first-letter last name on their own table.
EX:
TABLE A Last names
Adams
Anderson
TABLE B Last names
Barnes
Bill
Brandon
TABLE J Last names
Jackson
Johnson
etc…. ## this is the output I want to achieve
HTML:
<legend>Customers</legend>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
{% for idx in people %}
<td>{{ idx.0 }}</td>
<td>{{ idx.1 }}</td>
</tr>
{% endfor %}
</table>
views.py
def index(request):
context = {
"people": People.objects.all()
}
return render(request, 'index.html', context)
I can easily render this. However, I am trying to separate everyone based on their last name by creating as many as 26 tables. I want them to all appear in the same html page, but separated by tables accordingly. I don’t know how many letters I have from the database and I am trying to avoid hard-coding a table with A-Z header. This is because in my app, it is possible that out of 26, I only have 5 letters available. For looping in the html using the {% tags %} are very helpful.
I have been trying to create a table inside of a loop in html but I'm getting funny results. Can anyone please help me out?
Thank you very much!
You need the {% regroup %} tag.
{% regroup people by firstname.0 as initials %}
{% for initial in initials %}
<h2>TABLE {{ initial.grouper }} LAST NAMES</h2>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
{% for person in initial.list %}
<td>{{ person.firstname }}</td>
<td>{{ person.lastname }}</td>
</tr>
{% endfor %}
</table>
{% endfor %}
Note, your view needs to sort the people by lastname for this to work:
context = {
"people": People.objects.all().order_by('lastname')
}

Django favourite/compare feature

Just wondering if Sessions can be used to create a quick compare view of two products on my Django app. I'm listing items for sale and would like a user to be able to 'like' multiple items then have a new view to compare the selected products. Any thoughts?
Thanks
Sure, just assign the list products to a session variable.
Then assign the products list to the template, which could look something like that:
<table>
<tr>
<td></td>
{% for product in products %}
<th>{{ product.title }}</th>
{% endfor %}
</tr>
<tr>
<th>Feature 1</th>
{% for product in products %}
<td>{{ product.feature1 }}</td>
{% endfor %}
</tr>
<tr>
<th>Feature 2</th>
{% for product in products %}
<td>{{ product.feature2 }}</td>
{% endfor %}
</tr>
</table>

Django HTML to PDF with links and dynamic data

I have Django 1.7.1 and Python 2.7.8
I want to get a PDF from a rendered html template, I have tried PISA (xhtml2pdf) but first, i had a lot of problems with Bootstrap css, then, after deleting some lines, this message appeared:
'CSSTerminalFunction' object has no attribute 'lower'
'lower' seems to be part of python 3 and not available in 2.7 (If I am wrong, please tell me)
Now I am trying to use wkhtmltopdf but the documentation is too basic. It describes only one simple example with static HTML
Can someone explain how I can get a PDF with my actual template?
In the template, i have 2 links to css files, and one Image (logo)
I have some bootstrap css style, and i want to use it if possible
I put a "queryset" (actually a tuple) in the template to be rendered inside a table
I also put some string parameters to be rendered in deferent locations in my html.
Here is a part of the template
{% extends 'reporteBase.html' %}
{% block titulo %}Reporte - Inventario por Ubicación{% endblock %}
{% block content %}
{% if productos %}
<h2>Inventario de la ubicación "{{ ubi }}"</h2>
<div class="row" style="margin-top: 2em">
<table class="table table-condensed" data-resizable-columns-id="demo-table">
<thead>
<tr>
<th data-resizable-column-id="mod">Modelo/Item</th>
<th data-resizable-column-id="desc">Descripcion</th>
<th data-resizable-column-id="cant" data-noresize>Cantidad</th>
<th data-resizable-column-id="unidad" data-noresize>Unidad</th>
<th data-resizable-column-id="ubi" data-noresize>Ubicacion</th>
</tr>
</thead>
<tbody>
{% for p in productos %}
<tr>
<td>{{ p.producto__item}}</td>
<td>{{ p.producto__descripcion }}</td>
<td>{{ p.sum_cantidad }}</td>
<td>{{ p.producto__unidad }}</td>
<td>{{ p.ubicacion__nombre }}</td>
</tr>
{% empty %}
<tr><td colspan=4>No hay Productos</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}
Thanks!
A view needs to render the template as a PDF. That's what the code from the django-wkhtmltopdf Simple Example does.
Try rendering the page as HTML first to make sure the template is working. You could do this with a view like:
url(r'^html_preview/$',
TemplateView.as_view(template_name='pdf_template.html'))
After you've solved any issues with the template, then try it with PDFTemplateView.

Categories