Динамическая таблица с Python

Question

Я занимаюсь разработкой небольшого сайта, который должен извлечь некоторые данные из API и отобразить их в виде таблицы (я не знаю, сколько строк мне понадобится, это зависит от API).Я выбрал Python в качестве языка программирования бэкэнда и Flask в качестве веб-фреймворка.Мне нужно сделать запрос к API из Python при запуске страницы и отобразить его результат в виде таблицы в шаблоне HTML.render_template с некоторыми параметрами не может этого сделать - потому что он не может динамически отображать элементы HTML, только текст.Как я могу сделать это без JS / JQuery или использовать его минимально?Это мой код таблицы (это Bootstrap 4)

<table class="table table-bordered" id="users">
  <thead>
    <tr>
      <th>ID</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Действие</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="1">3319</td>
      <td>Никита</td>
      <td>Морев</td>
      <td><a href="#">Выбрать</a></td>
  </tbody>
</table>

Answer 1

Вы также можете быть заинтересованы в этом шаблоне, используя пакет панд Python:

import pandas as pd

@app.route('/table')
def display_table():
    # do something to create a pandas datatable
    df = pd.DataFrame(data=[[1,2],[3,4]])
    df_html = df.to_html()  # use pandas method to auto generate html
    return render_template('page.html', table_html=df_html)

затем внутри page.html включите следующее:

{{ table_html | safe }}

Вам необходимо включить фильтр safe , чтобы он отображал необработанный html без экранирования каких-либо символов.

Это отобразит следующее, что вы также можете стилизовать с помощью аргументов и Styler, доступных в pandas.

<table border="1" class="dataframe">  
<thead>    
<tr style="text-align: right;">      
<th></th>    
<th>0</th>      
<th>1</th>    
</tr>  
</thead>  
<tbody>    
<tr>      
<th>0</th>     
<td>1</td>     
<td>2</td>   
</tr>    
<tr>      
<th>1</th>    
<td>3</td>     
<td>4</td>    
</tr> 
</tbody>
</table>

РЕДАКТИРОВАТЬ: К вашему сведению, это также удобно для задач, где у вас сложное или динамическое условное форматирование, которое легче стилизовать на стороне сервера python / pandas, и вам не нужно беспокоиться о html-шаблоне. Конечно, это зависит от того, что вы делаете, но я утверждаю, что в некоторых ситуациях это более приемлемо - например, у меня!

Answer 2

Я отредактировал ответ @ juegern для работы с <a> тегами и теперь мой код выглядит так:

<table class="table table-striped" id="users">
 <thead>
  {%- for column in columns %}
     <th>{{ column }}</th>
  {%- endfor %}
 </thead>

 <tbody>
 {%- for row in items %}
    <tr>
    {%- for column in columns %}
        {% if row[column]['link'] %}
            <td><a href="{{ row[column]['link'] }}">{{ row[column]['text'] }}</a></td>
        {% else %}
            <td>{{ row[column] }}</td>
        {% endif %}
    {%- endfor %}
    </tr>
 {%- endfor %}
 </tbody>
 </table>

Код для применения некоторых данных к этой таблице из Flask: columns = [{'1': 'Hello', '2': 'World', '3': {'link': '#', 'text': 'Open'}}, {'1': 'World', '2': 'Hello', '3': {'link': '#', 'text': 'Open'}}] return render_template('your_file_name.html', columns=['1', '2', '3'], items=items_list)

Answer 3

При использовании Jinja2 вы можете динамически создавать свою таблицу, используя возможности сценариев Jinja2, с синтаксисом, очень похожим на Python:

<table>
 <thead>
  {%- for column in columns %}
     <th>{{ column }}</th>
  {%- endfor %}
 </thead>

 <tbody>
 {%- for row in items %}
    <tr>
    {%- for column in columns %}
       <td>{{ row|attr(column) }}</td>
    {%- endfor %}
    </tr>
 {%- endfor %}
 </tbody>
 </table>

При вызове render_template вам необходимо предоставить две переменные "columns", содержащие список столбцов строк, и "items", содержащие строки.

Нет необходимости использовать JS.

Если вы хотите поддерживать некоторые специальные типы данных, такие как ссылки, вы можете сделать это, используя операторы if в шаблоне.

См. Ссылку Jinja2 для более подробной информации: http://jinja.pocoo.org/docs/2.10/templates/