Подключаем jquery к html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Вообще, вариантов конечно много, но в общем случае можно сделать так:
Разбить таблицу и основной файл на два html дока
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class='once'>
<table id="logs">
{% include 'table.html' %}
</table>
</div>
<script>
function updateTable() {
$.ajax({
url: "/",
type: "get",
success: function(response) {
$("#logs").html(response);
}
});
};
setInterval(updateTable, 3000);
</script>
</body>
</html>
table.html
<thead>
<tr>
<th>Логи кассы</th>
</tr>
</thead>
<tbody>
{% for logs in atolbuff %}
<tr>
<td>{{logs}}</td>
</tr>
{% endfor %}
</tbody>
В html файле каждые 3000 м.сек (3 сек) отправляется get на /. Опять же, можно сделать отдельный эндпоинт, можно слать POST, можно это, можно то и тд.
В самомо боте проверяем что за запрос пришел, подобные запросы называются XHR. Если нам пришел XHR запрос (из ajax каждые 3 сек), то рендерим нашу таблицу и возвращаем её. Если это был обычный запрос, то рендерим index.
@app.route("/")
def hello_world():
atolbuff = [random.choices(string.ascii_lowercase, k=10) for x in range(3)]
if request.is_xhr:
return render_template('table.html', atolbuff=atolbuff)
else:
return render_template('index.html', atolbuff=atolbuff)
В JS'e получаем результат функции render_template('table.html') и через jQuery заменяем им html элемента с id logs (таблица в моем случае):
function updateTable() {
$.ajax({
url: "/",
type: "get",
success: function(response) {
$("#logs").html(response);
}
});
};
+ пару импортов
from flask import Flask, render_template, request 
