web-dev-qa-db-ja.com

Python

小さなサイトを開発しています。APIからデータをフェッチしてテーブルに表示する必要があります（必要な行数はわかりません。APIによって異なります）。 Pythonをバックエンドプログラミング言語として、Flaskをウェブフレームワークとして選択しました。ページの開始時にPythonからAPIにリクエストを送信し、その結果を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>
pythonhtmlflaskhtml-tablebootstrap-4
7
crinny

Jinja2を使用する場合、Pythonに似た構文で、Jinja2のスクリプト機能を使用して動的にテーブルを作成できます。

<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」の2つの変数を提供する必要があります。

JSを使用する必要はありません。

リンクなどの特別なデータ型をサポートする場合は、テンプレートのifステートメントを使用してサポートできます。

詳細については、Jinja2のリファレンスを参照してください。 http://jinja.pocoo.org/docs/2.10/templates/

3
Juergen

python package pandas：

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をレンダリングする必要があります。

これにより、次のものがレンダリングされます。これは、パンダで使用可能な引数とスタイラーでスタイル設定することもできます。

<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テンプレートを気にする必要がない場合にも便利です。もちろん、それはあなたが何をしているのかに依存しますが、これは私のようないくつかの状況でより保守しやすいと主張します！

4
Attack68

@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)

0
crinny