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: {
},
})
Related
I'm trying to display me df in a table to my web app (without using .tohtml because I need a dynamic table).
It seems that I can't use the key/column variable from my loop :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for key in BDD_Data_size %}
<tr>
{% for column in BDD_Data %}
<td> {{BDD_Data[column][key]}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
My error:
I think I've any problems with my data because if I write {{column}} / {{key}} instead of {{BDD_Data[column][key]}} it displays all the values from my dataframe.
The trick was to use mydataframe.values :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for value in BDD_Data.values %}
<tr>
{% for cell in value %}
<td> {{cell}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
I have a for loop within my Django project, what I'am trying to do is the following :
If
morning_recess == True
lunch_recess == True
afternoon_recess == True
then the bootstrap tag in that field should be
<td><span class="badge badge-success">Success</span></td>
else
<td> None </td>
Here is my current code:
<table style="width:100%">
<tr>
<th>Student Name</th>
<th>Morning Recess</th>
<th>Lunch Recess</th>
<th>Afternoon Recess</th>
<th>Earned At</th>
</tr>
<tr>
{% for i in students_recess_today %}
{% if i.morning_recess == True %}
<td>{{i.student_ps }}</td>
<td><span class="badge badge-success">Success</span></td>
<td>{{i.lunch_recess}}</td>
<td>{{i.afternoon_recess}}</td>
<td>{{i.created_at}}</td>
{% else %}
<td>{{i.student_ps }}</td>
<td>None</td>
<td>{{i.lunch_recess}}</td>
<td>{{i.afternoon_recess}}</td>
<td>{{i.created_at}}</td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
The morning_recess works fine, however if i do another if statement after the following one, the order of my table gets all messed up. How do I write this correctly? Thank you
It's not clear what "in that field" means, because in your example you have one extra column before the morning_recess column. But you can put {% if %} statements anywhere you want in the template, e.g.:
<td>
{% if i.morning_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
<td>
{% if i.lunch_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
<td>
{% if i.afternoon_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
...
Also as other commenters suggest, your for loop should probably wrap the rows of your table (<tr>...</tr>), not the columns (<td>).
You have the loop partially inside your tr element. It starts a row at the beginning and for every student adds the columns and ends a row, so it ends up looking like <tr></tr></tr></tr>.
You should move your for statement outside of the row, like so:
...
{% for i in students_recess_today %}
<tr>
...
</tr>
{% endfor %}
</table>
</div>
<table class="table">
<tr>
{% for item in summary.titles %}
<th>{{ item }}</th>
{% endfor %}
</tr>
<tr>
{% for title in summary.titles %}
<td> {{ summary.data[title] }}</td>
{% endfor %}
</tr>
</table>
Is it possible to get data in a similar way?
Exception Value:
Could not parse the remainder: '[title]' from
'summary.data[title]'
var summary = {
data:{
title1: 1,
title2:2
},
titles: [title1, title2]
}
I want to have four items from my database listed on the same row, as of now, my code is putting a break between each item.
{% if latest_shoop_list %}
{% for shoop in latest_shoop_list %}
<table>
<tr>
<td>
<img src='images/{{ shoop.shoop_image }}' width='250'/>
</td>
<td>
<img src='images/{{ shoop.shoop_image }}' width='250'/>
</td>
</tr>
</table>
{% endfor %}
Any help would be greatly appreciated!
You can take the table and row tags out of for loop.
<table>
<tr>
{% for shoop in latest_shoop_list %}
<td>
<img src='images/{{ shoop.shoop_image }}' width='250'/>
</td>
{% endfor %}
</tr>
</table>
I am not very good with table in html, so this question might be very simple to answer.
I pass the list of list {{ attributes }} to the template and I want to create a table with 2 rows and many columns.
TEMPLATE:
<div id="table">
<table border=0>
{% for attr in attributes %}
<td>
<th>{{ attr.0 }}</th>
{{ attr.1 }}
</td>
{% endfor %}
</table>
</div>
I want the {{ attr.0 }} to be the header and displayed on a single row and the {{ attr.1 }} displayed on the second row.
How about
<div id="table">
<table border=0>
<thead>
<tr>
{% for attr_head in attributes.keys %}
<th>{{ attr_head }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tr>
{% for attr in attributes.values %}
<td>{{ attr }}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
Just loop through the dict's keys and rendering them as th elements in the table header and then loop through the values, rendering them inside the tbody. th and td are columns in the table and tr are rows.
Also, you should read up on html tables, they aren't that hard
You could just loop twice, once for headers once for content?
<div id="table">
<table border=0>
<tr>
{% for attr in attributes %}
<th>{{ attr.0 }}</th>
{% endfor %}
</tr>
<tr>
{% for attr in attributes %}
<td>{{ attr.1 }}</td>
{% endfor %}
</tr>
</table>
</div>