How to format jinja tables
I have a table that I am trying to display a table properly on a flask HTML site.
my python file is
@app.route('/test', methods=['GET']) def LoadTest(): global USERS,STARTTIME,ENDTIME,SUBTYPE,SUBSTATUS,USAGE CollectValues() titles = ['USERS','STARTTIME','ENDTIME','SUBTYPE','SUBSTATUS','USAGE'] return render_template('Test.html', data1 = USERS , data2 = STARTTIME ,titles = titles) My current html code is
<table> {% for item in titles %} <th class="c1">{{item}}</th> {% endfor %} {% for dater in data1 %} <tr><td class="c2">{{dater}}</td></tr> {% endfor %} {% for dater2 in data2 %} <tr><td>{{dater2}}</td></tr> {% endfor %} However, this outputs the table as
USERS STARTTIME ENDTIME SUBTYPE SUBSTATUS USAGE cody mimic james 7/10/2020 7/11/2020 7/12/2020 I am trying to format the table like this
USERS STARTTIME ENDTIME SUBTYPE SUBSTATUS USAGE cody 7/10/2020 8/10/2020 Premium Active 15GB mimic 7/11/2020 8/11/2020 Premium Active 15GB James 7/12/2020 8/12/2020 Premium+ Active 25GB All of the Table content meant to go below the Table headers are in lists. I have a list for Users, Starttime, Endtime, Subtype, Substatus, And Usage. I am having difficulty getting this properly formatted. I keep coming back to the issue of them stacking.
I think the following should solve your problem.
@app.route('/test', methods=['GET']) def load_test(): global USERS,STARTTIME,ENDTIME,SUBTYPE,SUBSTATUS,USAGE CollectValues() titles = ['USERS','STARTTIME','ENDTIME','SUBTYPE','SUBSTATUS','USAGE'] dataset = zip(USERS, STARTTIME, ENDTIME, SUBTYPE, SUBSTATUS, USAGE) return render_template('test.html', titles=titles, data=dataset) <table> <thead> <tr> {% for item in titles %} <th class="c1">{{item}}</th> {% endfor %} </tr> </thead> <tbody> {% for user, starttime, endtime, subtype, subsstatus, usage in data %} <tr> <td class="c2">{{user}}</td> <td class="c2">{{starttime}}</td> <td class="c2">{{endtime}}</td> <td class="c2">{{subtype}}</td> <td class="c2">{{substatus}}</td> <td class="c2">{{usage}}</td> </tr> {% endfor %} </tbody> </table> 
