CODEWITHSUNDEEP
pythonhtmlflaskdatatablesjinja2
Szymo n
Szymo n

Reputation: 131

How to print table using Jinja2 (without page refresh)

I use Pandas to get and transform some data from database and now I'd like to print the score dynamic, that is without page refresh. I've already tried: {{ mydata|safe}} and I get the whole information but everything is together not in table.

I use Pandas to create HTML table from dataframe mydata.to_html()) and I get something like that:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>Part_number</th>
      <th>Type_name</th>
      <th>Short_desc</th>
      <th>Price_1</th>
      <th>Price_2</th>
      <th>VAT</th>
      <th>DB_source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>565_MLNN7_101</td>
      <td>AIR_FILTER</td>
      <td>AIR_FILTER_GREEN</td>
      <td>1.20</td>
      <td>6.30</td>
      <td>23%</td>
      <td>Murexin</td>
    </tr>
    <tr>
      <th>1</th>
      <td>217_NE307_115</td>
      <td>CABLE</td>
      <td>CABLE_POWER_AC</td>
      <td>0.84</td>
      <td>3.20</td>
      <td>23%</td>
      <td>DB_1</td>
    </tr>
    </tr>
  </tbody>
</table>

Do You know how print the table using Jinja2 ?

Upvotes: 1

Views: 6583

Answers (2)

Szymo n
Szymo n

Reputation: 131

Sure Here is my code for html template:

{% extends "header.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block content %}

<div class="container">
<form class="form-signin" method="POST" action="/search">
    <div class="panel panel-default">
        <div class="panel-heading">Service Part Inquiry</div>
        <div class="panel-body">
{{ form.hidden_tag() }}
{{wtf.form_field(form.FGPN_Search)}}
{{wtf.form_field(form.AssyTypeName_Search)}}
{{wtf.form_field(form.Source_Search)}}

<button type="submit" class="btn btn-primary btn-xsy">Search</button>
 </div>
    </div>
</form>
</div> <!-- /container -->
    {{data|safe}}
    {% endblock %}

Code for function below. Actually I check condition only for "Source_Search": "Murexin", that why I deleted some codes (will be easier to understand for You :) I respect Your time): 

    @app.route('/search',methods=['GET', 'POST'])
    def search():
        form = SearchForm()
        if request.method == 'POST':
            FGPN_Search = form.FGPN_Search.data
            AssyTypeName_Search = form.AssyTypeName_Search.data
            Source_Search = form.Source_Search.data
        (...)

            elif Source_Search == 'Murexin':
                if len(FGPN_Search)>1:
                    tablePLM=read_sql_query(select1 + "\'" + FGPN_Search + "\'" + select2 + "\'" + AssyTypeName_Search + "\'",CurDB_2)
                    tableSIC = read_sql_query(selectSIC + "\'" + FGPN_Search + "\'",CurDB_1)
                    mydata = pd.merge(tablePLM, tableSIC, on='PM_PARTNUMBER',how='outer')
                    mydata.to_html()        
                    return render_template('search.html', form=form,data=mydata)
            elif Source_Search == 'test':
                return "<h1>test</h1>"
            else:
                flash("Please write anything.")
                return render_template('search.html',form=form)
        return render_template('search.html', form=form)

Upvotes: 1

VMRuiz
VMRuiz

Reputation: 1981

The jinja template that you need is something like this:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>Part_number</th>
      <th>Type_name</th>
      <th>Short_desc</th>
      <th>Price_1</th>
      <th>Price_2</th>
      <th>VAT</th>
      <th>DB_source</th>
    </tr>
  </thead>
  <tbody>
      {% for row in mydata %}
          <tr> 
                <th>{{loop.index0}}</th>
                <td>{{row['Part_number']}}</td>
                <td>{{row['Type_name']}}</td>
                <td>{{row['Short_desc']}}</td>
                <td>{{row['Price_1']}}</td>
                <td>{{row['Price_2']}}</td>
                <td>{{row['VAT']}}</td>
                <td>{{row['DB_source']}}</td>
          </tr>
      {% endfor %}
  </tbody>
</table>

Check jinja2 documentation for more details

Upvotes: 1

Related Questions