I am working on a Jekyll website which needs an agenda. I would like to add points to the agenda in my _config.yml file so it looks like this in the file.
agenda:
date: 26 January
thing: Birthday
date: 30 March
thing: Another birthday
Another option would be:
agenda:
item: <td> Date </td> <td> Thing </td>
item: <td> Date </td> <td> Thing </td>
As you can see above the output has to be a list. It does not work no matter what I try. This is the last thing I have tried.
<table>
<tbody>
{% for point in site.agenda %}
<tr>
{{ point }}
</tr>
{% endfor %}
</tbody>
</table>
I hope you can help me solve this problem!
I can't try this right now, but what about:
agenda:
- date: January 26
event: Birthday
- date: May 30
event: Another birthday
Note: (make sure that the - is indented by at least one space and that indents match)
And then:
<table>
<tbody>
{% for point in site.agenda %}<tr>
<td>{{ point.date }}</td><td>{{ point.event }}</td>
</tr>{% endfor %}
</tbody>
</table>
Or something quite similar. In one page, I have an alternative syntax:
agenda:
- { date: January 26, event: Birthday }
etc...
That works like a treat.
Related
I have a table with a feature to select value of a row to send it to the Flask backend, that on button click also redirects my users to a different endpoint. What I need is to open the new endpoint requested in a new webpage instead of the same page. My HTML code where the button is located is as follows. It envelopes a table column value.
{% for item in rows %}
<tr>
<td>{{ item[0] }}</td>
<td>
**<button** formaction="/stockpopup"
type="submit" name = 'stock' value = {{`item[11] }}>
{{ item[11] }}**</button>**
</td>
<td>{{ item[1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I am looking for possible alternates to using JavaScript to achieve this outcome if anyone can help.
You can use the onclick method inside of html.
Something like this should work:
<button onclick="window.open('https://stackoverflow.com','_blank')">Open in new tab</button>
I have a simple Flask application with just one table.
So python code is irrelavantly simple:
#app.route('/')
def home():
items = long_db_request()
return render_template("index.html", items=items)
#app.route('/extended')
def extended():
return render_template("animals.html")
And items is a huge JSON object.
I created a table which reflects that data:
<table>
<tr>
<th style="text-align:center">id</th>
<th style="text-align:center">creation time</th>
<th style="text-align:center">name</th>
<th style="text-align:center">animals</th>
<th style="text-align:center">number</th>
</tr>
{% for item in items %}
<tr>
<td> {{ item.id }} </td>
<td> {{ item.time }} </td>
<td>
{{ item.name }}
</td>
<td> {{item.group}} </td>
<td>{{ item.group|length }}</td>
</tr>
{% endfor %}
</table>
The table looks like:
As you can see, column animal contains a lof of object which makes it all difficult to percieve.
I want it to be like this
which is a lot easier to get. And show animals is a link to another page, where a pure json exists.
How can I achieve this?
I followed the doc of jinja2 and Flask and found method url_for() but in that case I have to pass all my json in query which is unacceptable..
How can I jump from first image to exellent nice view of the second one?
working code with the first picture is place here
Thank you very much in advance!
P.S. I only saw one question here with rellevant topic, but it does not help me
Instead of passing all the animals (e.g. cats) from one view to another, just pass the category cats to the next page.
The view function for the next page then selects all cats from the json, and passes the cats then to the detailed view.
So, on you overview page, you render links like species.html?cats (and so on), and when somebody clicks on these links the view function selects all cats, and then passes them into a render_template("species.html", species=cats) view.
Trying to format a table using Angular where:
If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.
1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.
2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.
3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.
Please could someone help correct this code or point me in the right direction
Thanks
<table class="table-striped">
<thead>
<tr>
<td>day</td>
<td>time</td>
<td>region</td>
<td>event</td>
<td>period</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let eco of eco_r ; let i = index">
<template [ngIf]="eco.date != eco[i-1].date">
<td colspan="5">{{eco.datetime| date:'longDate' }}</td>
<tr>
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
<template [ngIf]="eco.date == eco[i-1].date">
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</template>
</tr>
</tbody>
</table>
------------UPDATE ---------------
Following #Iancovici comments I have revised the following
i) corrected to reference eco_r[i-1].date
ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions
iii) updated code to only check previous value when i > 0
I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?
Thanks
<template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
<tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
</tr>
<tr> <td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
Should probbly be *ngIf not [ngIf] in general. But I see in your case it’s ok because you’re using an ng template which means instead of directive *ngIf it’s not a bonded property [ngIf]
Also you're accesing the same instance, should access index of array instead so..
change from
*ngIf="eco.date == eco[i-1].date">
to
*ngIf="eco.date == eco_r[i-1].date">
Update: Two more notes
Make sure you create a table, with tag
Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.
Try this without the filters, then integrate the filters in.
<table>
<div *ngFor="let eco of eco_r; let i = index">
<div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
<tr>
<td colspan="5">{{eco.datetime }}</td>
</tr>
<tr>
<td>{{eco.datetime }}</td>
<td>{{eco.datetime }}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</div>
</div>
</table>
My data are like this :
13.2610136284,20.8676059554,11.6376896892,0.51203356592,167,20154.4815106,
395,766,56,55047.3477967,-26818.1766435,3072.97868784,12.5402166873,-1443.
74556748,-4.0
I need to display it as a table in html
This is the function used in python to transform the data suitable for a table
import string
from datetime import datetime, date
def ratio_fil():
ratioFil = open('sergRatiosOut20170426','r')
rat = ratioFil.read().split(',')
ratioFil.close()
return rat
Rat is similar to this :
['13.2610136284', '20.8676059554', '11.6376896892', '0.51203356592',
'167', '20154.4815106', '395', '766', '56', '55047.3477967',
'-26818.1766435', '3072.97868784', '12.5402166873', '-1443.74556748',
'-4.0\r\n']
I need to put it in a table, So i create a data_table tags :
<tr><td>X</td>
<td>{{data_table.0|floatformat:1}} %</td></tr>
<tr><td>y</td>
<td>{{data_table.1|floatformat:1}} %</td></tr>
<tr><td>y1 </td>
<td>{{data_table.2|floatformat:1}} </td></tr>
<tr><td>y2</td>
<td>{{data_table.3|floatformat:1}} </td></tr>
In Html :
<div> {% with rat as data_table %}
{% include 'tags/data_table.html' %}
{% endwith %}
</div>
The table appears empty, i think it should be a method to import rat ? Please i need your help
You can use builtin for loop template tag to loop through and render the data in HTML table
<table>
<tr>
<th>Column Name</th>
</tr>
{% for data in data_table %}
<td>
<td>{{ data }} </td>
</td>
{% endfor %}
</table>
Remember to return the data from your view
def ratio_fil():
ratioFil = open('sergRatiosOut20170426','r')
rat = ratioFil.read().split(',')
ratioFil.close()
return render(request, 'template_name.html', {'data_table': rat})
I am trying to displaying the products using Angular JS loop.
<tr ng-repeat="od in OrderDetail">
<td> {{ od.ProductName }} </td><br />
<td align='right'> {{ od.MRP }} </td>
<td align='right'> {{ od.SellPrice }} </td>
<td> {{ od.Quantity }} </td>
<td align='right'> {{ od.Quantity * od.SellPrice | currency:""}}</td>
</tr>
My requirement is display the product name in 1 line, then MRP, sellprice, quantity, total in next line... and so on.
I tried after product name, also i tried using colspan=5 for product name. None of them is working.
Can someone help me on this.
This might be what you want:
<table>
<tbody ng-repeat="od in OrderDetail" >
<tr>
<td colspan="4"> {{ od.ProductName }} </td>
</tr>
<tr>
<td align='right'> {{ od.MRP }} </td>
<td align='right'> {{ od.SellPrice }}</td>
<td> {{ od.Quantity }}</td>
<td align='right'> {{ od.Quantity * od.SellPrice | currency:""}}</td>
</tr>
</tbody>
</table>
And yes, it's okay to have more than one <tbody>
EDIT: It's good practice to use :: for variables in ngRepeat, if you are only changing the entire array (such as renewing the array) and not modifying elements in the array. This will reduce the amount of watchers needed.
You want ng-repeat-start and ng-repeat-end: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points