I'm using HTML, CSS, and Javascript for the frontend and Django for the backend, and PostgresSQL for DB. Actually, I have successfully loaded data from the EXCEL file to Django and I'm trying to fetch data from Django to HTML Table. But, I'm getting only headers of the table, not the data. How to fix it.
index.html
{%extends "base.html"%}
{%block content%}
<html>
<table>
<thead>
<th>Brand</th>
<th>Name</th>
</thead>
<tbody>
<tr>
<td><strong>{{pro.brand}}</strong></td>
<td><strong>{{pro.name}}</strong></td>
</tr>
</tbody>
</table>
{%endblock%}
views.py
def product(request):
pro = Product.objects.all()
return render(request, 'index.html',{'pro': pro})
urls.py (App file)
urlpatterns = [
path('product/', views.product, name='product'),
]
because your context variable pro is a queryset(a list of instances), you have to do a loop in template like this:
{%extends "base.html"%}
{%block content%}
<html>
<table>
<thead>
<th>Brand</th>
<th>Name</th>
</thead>
<tbody>
{% for p in pro %}
<tr>
<td><strong>{{p.brand}}</strong></td>
<td><strong>{{p.name}}</strong></td>
</tr>
{% endfor %}
</tbody>
</table>
{%endblock%}
Related
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>
Here I have html template. in that template I am accessing dynamic data by using Django from backend. By using this symbol "{{}}". So here i want to access these values in quasar pagination. I want to make pagination using vue.js. I am trying to integrate these values in vue.js component for making a pagination in vue.js. How can we merge these template values in vue.js script
html template
<div>
<table>
<thead>
<tr>
<th>Member</th>
<th>Product</th>
<th>Message</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% if msg_list %}
{% for i in msg_list %}
<tr>
<td>
<div>
<a>{{i.username|first|upper}}<span>{{i.username|last|upper}}</span></a>
</div>
</td>
<td>
<div>{{i.ttle}}</div>
</td>
<td>
<div>{{i.message}}</div>
</td>
<td>
<div>
{% for key,value in some_date.items %}
{% if i.id == key %}
<a>{{ value }}</a>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<button><span class="fa fa-trash"></span></button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
quasar vue.js component
<div id="q-app">
<div class="q-pa-lg flex flex-center">
<q-pagination
v-model="current"
:max="5"
direction-links
boundary-links
icon-first="skip_previous"
icon-last="skip_next"
icon-prev="fast_rewind"
icon-next="fast_forward"
></q-pagination>
</div>
</div>
vue.js script
new Vue({
el: '#q-app',
data () {
return {
current: 1,
username:'',
ttle:'',
message:'',
value:'',
}
},
methods: {
},
})
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'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?
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>