I'm working on a Django project but am relatively new to bootstrap and css.
I have a table with books inventory and its looking fine until there are records in them. But when there are no records, I want to display a placeholder "No books added yet."
I've tried multiple ways but I'm unable to do so.
This is my html file:
<table class="table table-hover table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Genre</th>
<th scope="col">Available</th>
<th scope="col">Add Date</th>
</tr>
</thead>
<tbody>
{% if books.count > 0 %}
{% for row in books %}
<tr>
<td>{{row.title}}</td>
<td>{{row.author}}</td>
<td>{{row.genre}}</td>
<td>{% if row.available %}Yes{% else %}No{% endif %}</td>
<td>{{row.date}}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td>No Books added yet !</td>
</tr>
{% endif %}
</tbody>
</table>
Doing so, the placeholder is just comimg on the first cell:
How to edit this so this cell shows as a complete row?
Related
I tried to print the client list and all the data is shown but I have no idea how to display<br> it in the table below. as I have added a client and it is stored in firestore but when I fetch the data from the collection the table is created and the client is fetched. !!! even when I print the client it is showing all the data but it still is not showing the details in the web. for better understanding I have attached image below.
in HTML I need to fetch the data from firestore database collection in this table. I added a link of a screenshot of the web for a better understanding.
allclients = db.collection("clients").get()
return render_template("admin/clients.html", client_lists=allclients )
{% block content %}
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Client Code</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
<th scope="col">Contact</th>
<th scope="col">Status</th>
<th scope="col">Update</th>
<th scope="col">Action</th>
</tr>
</thead>
{% if client_lists %}
{% for client_list in client_lists %}
<tbody>
<tr>
<td>{{client_list.client_id}}</th>
<td>{{client_list.first_name}}</td>
<td>{{client_list.email}}</td>
<td>{{client_list.phone_number}}</td>
<td>{{client_list.address}}</td>
<td><button type="button" class="btn btn-success">Active</button></td>
<td><button type="button" class="btn btn-primary">Edit</button></td>
<td><button type="submit" class="btn btn-danger">Delete</button></td>
{% endfor %}
</tr>
</tbody>
</table>
{% else %}
<p class="clientnotfound">No Clients Found?, Why don't you try adding a clients.</p>
{% endif %}
{% endblock %}
[Image is below for better understanding][1]
[1]: https://i.stack.imgur.com/vGqqM.png
You may want to change your <tbody> to:
<tbody>
{% for client_list in client_lists %}
<tr>
<td>{{client_list.to_dict()["client_id"]}}</td>
<td>{{client_list.to_dict()["first_name"]}}</td>
<td>{{client_list.to_dict()["email"]}}</td>
<td>{{client_list.to_dict()["phone_number"]}}</td>
<td>{{client_list.to_dict()["address"]}}</td>
<td><button type="button" class="btn btn-success">Active</button></td>
<td><button type="button" class="btn btn-primary">Edit</button></td>
<td><button type="submit" class="btn btn-danger">Delete</button></td>
</tr>
{% endfor %}
</tbody>
You need to convert your client_lists to dictionary before using it.
You can also use client_list.get("email") but it can give you some problems.
What I am trying to do is to populate a html table with the same numbers of rows as entries in my dictionary.
I am passing my dictionary items as a context variable to the html.
I can show my dictionary items as follows:
{% for key,value in top_items.items %}
<ul>{{ key }}</ul>
{% endfor %}
But when I try an stick it into a table to create table rows, like below, it does not work. It seems to put them all in one row. Instead of making a new row for each item.
<table class="u-half-width">
<thead>
<tr>
<th>Column</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
{% for key,value in top_items.items %}
<tr>{{ key }}</tr>
{% endfor %}
</tr>
</tbody>
</table>
Your HTML is invalid; you can't nest a <tr> inside another <tr>, and you don't have any <td>/<th> elements.
Try:
<tbody>
{% for key,value in top_items.items %}
<tr>
<th scope="row">{{ key }}</th>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
I have a table in html which gets the data from a SQL query in PY. One of the columns in my SQL table is type (tp). I want the html table to show one color for each row of the same type and another for opposite. It´s a financial diary so when you input expenses SQL save that info. I want the table to show the history and expenses rows in red and incomes rows in green. Here it´s my PY and HTML code. Please help I´m lost
#app.route("/history")
#login_required
def history():
"""Show history of inputs"""
inputs = db.execute("""
SELECT amount, category, tp, transacted
FROM inputs
WHERE user_id = :user_id
ORDER BY transacted ASC
""", user_id=session["user_id"])
return render_template("history.html", inputs=inputs)
{% extends "layout.html" %}
{% block title %}
History
{% endblock %}
{% block main %}
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Category</th>
<th>Transacted</th>
</tr>
</thead>
<tbody>
{% for input in inputs %}
<tr>
<td>{{input["tp"]}}</td>
<td>{{input["amount"]}}</td>
<td>{{input["category"]}}</td>
<td>{{input["transacted"]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
Can you check whether below code will work.
Define "red" and "green" css classes in your css file.
<tbody>
{% for input in inputs %}
<tr>
{% if input["tp"] == 'expense' %}
<td class="red">{{input["tp"]}}</td>
<td class="red">{{input["amount"]}}</td>
<td class="red">{{input["category"]}}</td>
<td class="red">{{input["transacted"]}}</td>
{% else %}
<td class="green">{{input["tp"]}}</td>
<td class="green">{{input["amount"]}}</td>
<td class="green">{{input["category"]}}</td>
<td class="green">{{input["transacted"]}}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
I am listing down the data coming from the database in a table. But it is not aligning as a table.
what I want to display in the web page is,
Name john mark
Faculty cs
University xxx
But what I get in the web page is,
Name john mark
Faculty cs
University xxx
In my .html I have,
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
<br>
{% endfor %}
Please help me with this as I am new to python flask.
This is how valid table HTML should look.
You have not wrapped tr with <table> element.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
So your code should look like this.
<table>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
{% endfor %}
</table>
Try this html
<table>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
I'm using symfony and html2pdf bundle to generate a pdf file so here's the code that I used to display a table in the pdf file:
<table class="border" width="100%" align="center">
<thead>
<tr>
<th>Kilometrage</th>
<th>Liste des Interventions</th>
</tr>
</thead>
<tbody>
<tr>
{% if voitures.kilometrage-voitures.kilometragederniervidange<20000 and voitures.kilometrage-voitures.kilometragederniervidange>=10000%}
{% for intervention1 in interventions1 %}
<td>{{ voitures.kilometragederniervidange+10000 }}</td>
<td>***{{ intervention1.interventions }}</td>
{% endfor %}{% endif %}
</tr>
</tbody>
</table>
and here's what I get as a result:
and what I want to do is to show each line separately. What should I do exactly? ?
You have probably misplaced the for cycle, try this:
<table class="border" width="100%" align="center">
<thead>
<tr>
<th>Kilometrage</th>
<th>Liste des Interventions</th>
</tr>
</thead>
<tbody>
{% if voitures.kilometrage-voitures.kilometragederniervidange<20000 and voitures.kilometrage-voitures.kilometragederniervidange>=10000%}
{% for intervention1 in interventions1 %}
<tr>
<td>{{ voitures.kilometragederniervidange+10000 }}</td>
<td>***{{ intervention1.interventions }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
This will insert new table row for every record / run of the for cycle.