Auto Refre sh div с DataFrame каждые N секунд

Question

Я видел много решений для этого вокруг net, но не могу найти простейшего решения для этой .... простой страницы flask, которая загружает df в таблицу html. Все, что я хочу сделать, это перезагружать только df в таблице html каждые N секунд, а не всю страницу.

app.py

from flask import Flask, render_template
from app import app
import pandas as pd
import sqlalchemy as sa
cn = sa.create_engine('<my connection string>')

@app.route("/")
def home():
    sql = "select * from <myTable>"
    df = pd.read_sql(sql,cn)
    return render_template("index.html", df=df)

if __name__ == "__main__":
    app.run()

index. html

{%extends "base.html"%}

{% block content %}
<div>
    <table cellpadding="3" cellspacing="3" border=1>
        <thead>
            <tr style="background-color:#a8a8a8">
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            {% for index, row in df.iterrows(): %}
            <tr>
                <td>{{ row["Column_1"] }}</td>
                <td>{{ row["Column_2"] }}</td>
                <td>{{ row["Column_3"] }}</td>
            <tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

Любая помощь в моих следующих шагах будет принята с благодарностью.

Answer 1

Я разобрался.

app.py

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/df")
def df4reload():
    sql = "select * from <myTable>"
    df = pd.read_sql(sql,cn)
    return render_template("df.html", df=df)

index. html

{%extends "base.html"%}

{% block content %}
    <div id="df"></div>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $('#df').load('/df'); //Preloads df
        var timeout = setInterval(reloadDF, 5000);    
        function reloadDF () {
            $('#df').load('/df');
        }
    </script>
{% endblock %}

df. ​​html

<table cellpadding="3" cellspacing="3" border=1>
    <thead>
        <tr style="background-color:#a8a8a8">
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        {% for index, row in df.iterrows(): %}
        <tr>
            <td>{{ row["Column_1"] }}</td>
            <td>{{ row["Column_2"] }}</td>
            <td>{{ row["Column_3"] }}</td>
        <tr>
        {% endfor %}
    </tbody>
</table>

У меня работает. Если у кого-то есть лучшие или другие решения, дайте мне знать.

Answer 2

Надеюсь, это вам поможет, однако я настоятельно рекомендую протестировать это и частично обновить свою страницу с помощью тестовой строки перед работой с фреймом данных. Метод ajax и маршруты flask верны. Но я не на 100% уверен в преобразовании фреймов данных в json, вам нужно будет изучить это

Результат будет выводить "random_dictionary" на консоль вашего браузера каждые 2000 миллисекунд

индекс. html

{%extends "base.html"%}
{% block content %}
<div>
    <table cellpadding="3" cellspacing="3" border=1>
        <!-- Your existing code -->
    </table>
</div>
<script>

//The setInterval() method repeats a given function at every given time-interval.
//Syntax: setInterval(function, milliseconds)

//Calls the update_data_frame function every 2000 milliseconds
var myVar = setInterval(update_data_frame, 2000);

//This function makes a POST request to the flask route "/update"
//The value of return response.json() is the return value of the "/update"
//In your case this is going to be the dataframe
//".then(function(myjson))..." captures the return value to be used as required
function update_data_frame () {
    url = '/update';
    fetch(url,{method:'POST'})
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson)
    {
      store = myJson;
      //This line prints out "{somedata":"somedatavalue","somedata1":"somedatavalue1"}" every 2000 milliseconds
      console.log(store);
    });
  }

</script>
{% endblock %}

-------------------------------- ------------------------------

app.py

@app.route('/update',methods=['POST'])
def update_data_frame():
    #this should be your dataframe
    random_dictionary = {"somedata":"somedatavalue","somedata1":"somedatavalue1"}
    return jsonify(random_dictionary )