I except this question to be relatively easy, but since I am new to Django I am struggling.
I got a QuerySet which is given to a template. Basically I want to create a football (soccer) table. But also in general I want to understand the concept.
So for every team in the teams Query set, the data should be filled in the 5 respective columns. At the moment I solved it by adding a for loop into every column. However, I think that it looks ugly and is unefficient. Moreover, I want to edit the id's for the first three loops.
So what I am looking for: A possibility to set the for loop around the div's but without creating the div's in every loop.
Something like:
{%for team in teams %}
<div id="position">team.position</div>
<div id="name">team.name</div>
...
{% endfor %}
In addition to adding something like:
{% if forloop.counter0 == 0|1|2 %}
add id/class to div row
{% endif %}
Is the smartest way here, adding a variable to the class, meaning class={{xyz}} ?
The template looks at the moment like this.
<div class="row">
<div class="col-md-2" id="position">{% for tea in teams %}{{tea.league_position}}</br>{% endfor %}</div>
<div class="col-md-4" id="name">{% for tea in teams %}{{tea.team_name}}</br>{% endfor %}</div>
<div class="col-md-2" id="points">{% for tea in teams %}{{tea.league_points}}</br>{% endfor %}</div>
<div class="col-md-2" id="goals">{% for tea in teams %}{{tea.goals_shot}}</br>{% endfor %}</div>
<div class="col-md-2" id="received">{% for tea in teams %}{{tea.goals_received}}</br>{% endfor %}</div>
</div>
Thank you for your help!!!!!
Simon
You're building a table out of divs. Use a table instead.
<table>
<tr>
<th>Position</th>
<th>Name</th>
<th>Points</th>
<th>Shots</th>
<th>Goals against</th>
</tr>
{% for t in teams %}
<tr>
<td>{{ t.league_position }}</td>
<td>{{ t.team_name }}</td>
<td>{{ t.league_points }}</td>
<td>{{ t.goals_shot }}</td>
<td>{{ t.goals_received }}</td>
</tr>
{% endfor %}
</table>
If you don't want to include the divs then the only way possible would be to do an ajax request to populate the columns separately...
Below is untested (and probably wrong) but it should give an idea of what I mean
$.get('my_get_teams_url', function(data){
for(i = 0; i < data.teams.length; i++)
{
$('#position').append(data.teams[i].position);
$('#name').append(data.teams[i].name);
}
});
Related
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')
}
I'm trying to create a simple page, which should display a table.
It suppose to have several rows and columns. But not every row should have the same amount of columns.
this my html code which is producing an error:
<html>
{% for count in machine_count %}
<tr>
<td>{{ count }}</td>
<td>Aufzugmotor</td>
{% for status in statuses %}
{{ status.machine_number}}
{% if count == {{ status.machine_number }} %}
<td class="tableCell">
<img class="imageClass" src={{ status.src }}>
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</html>
statuses is a model and machine_number is a tuple of strings.
I'm not really getting the mistake I made.
Is it not possible to use the if-tag on a placeholder ?
{% if count == {{ status.machine_number }} %}
Should be:
{% if count == status.machine_number %}
{{...}} is only used for injecting variable contents to the final output. Omit them if you're using the variable in other situations.
i imported a csv and i want to create a table from that. The csv is parsed and update_or_create function help to actualice the database.
the quantities of csv's columns is variable also the rows. Then, (i think) i am forced to do two classic forloops for parse it. The problem is that not working or i am doing something wrong.
the first forloops reads the headers and the second go inside each object.
but i don´t know how to call the attribute of each object
<table >
{% for h in archivo.fieldnames %} // headers are "isbn" and "stock"
{% for x in objeto_nuevo %}
<tr>
<td>{{h}}</td> //render "isbn", ok.
<td>{{{{x}}.{{h}}}}</td> // i want object1.isbn but dont render.
</tr>
{% endfor %}
{% endfor %}
</table>
thanks in advance
More information about variable in template here
<table >
{% for h in archivo.fieldnames %} // headers are "isbn" and "stock"
{% for x in objeto_nuevo %}
<tr>
<td>{{ h }}</td>
<td>{{ x.h }}</td> <!-- Show h attribute of object x -->
</tr>
{% endfor %}
{% endfor %}
</table>
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 %}.
I want to make table where second element in every row is photo. Like here: http://www.uefa.com/worldcup/season=2014/standings/
I have all my values in list. In list, third element is photo's url. Other variables are just strings. How to write it in Django template?
Here is my code:
<table>
{% for row in data%}
<tr>
{% for value in row %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
I hope you will understand my problem.
Your {{ value }} for that second element should be a path (relative or absolute) to an image resource. If this data is defined by a model within your Django project, make sure the field is set correctly in models.py--it should be a FileField or ImageField. With those, you get a callable URL property. Then in your template, something along these lines:
<table>
{% for row in data%}
<tr>
{% for value in row %}
{% if value.url %}
<td><img src="{{ value.url }}" alt="..."></td>
{% else %}
<td>{{ value }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>