Django обновляет представление на основе базы данных
Мой вопрос кажется довольно простым, но я нашел его трудным, поскольку я очень новичок в HTML / CSS / Django.
У меня есть база данных postgresql, которая постоянно обновляется другим микросервисом. Я хочу просто отобразить таблицу на HTML-странице (например, с помощью https://datatables.net/) и продолжать обновлять ее. Я нашел, что мы можем создать websocket соединение, когда мы достигаем html страницы через каналы, но все учебники в сети посвящены чатботу.
У меня получилось сделать это через websocket/consumer:
class WSConsumer(WebsocketConsumer):
def connect(self):
self.accept()
while True:
#get the entire info from my db table
info = list(infoDB.objects.value())
self.send(json...(info..))
Я продолжаю получать информацию на моей HTML странице (что я и хотел), единственная проблема в том, что я получаю ВСЁ из таблицы + мне трудно правильно заменить исходную таблицу на новую.
Вот моя HTML страница:
{% load static %}
<!DOCTYPE html>
<html lang="En">
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<title>Test</title>
</head>
<body>
<table id="table_id" class="table table-bordered" style="width:100%">
</table>
<script>
const socket = new WebSocket('ws://127.0.0.1:8000/ws/info_co/')
socket.onmessage = function(e){
const data = JSON.parse(e.data);
const table = document.getElementById("table_id");
for (var i = 0; i < data.message.length; i++)
{
var newRow = table.insertRow(table.length);
for (let key in data.message[i]){
var cell = newRow.insertCell(i);
cell.innerHTML = data.message[i][key];
}
}
var table = $('<table id="table_id" class="table table-bordered" style="width:100%">');
var tr = $('<tr>');
var arrheader = ['col 1', 'col 2', 'col 3','col 4', 'col 5','col 6'];
var array = data.message;
for (var j = 0; j < arrheader.length; j++) {
tr.append($('<th>').text(arrheader[j]));
}
table.append(tr);
for (var i = 0; i < array.length; i++) {
table.append(
$('<tr>').append(
$('<td>').text(array[i].elem_a),
$('<td>').text(array[i].elem_b),
$('<td>').text(array[i].elem_c),
$('<td>').text(array[i].elem_d),
$('<td>').text(array[i].elem_e),
$('<td style="color: green">').text(array[i].elem_f)
));
}
//table.css("border", "solid");
//document.querySelector('#table_id').innerHTML = table;
//document.getElementById('table_id').innerHTML = table;
$('#table_id').replaceWith(table);
//$('body').append(table);
}
$("#table_id").DataTable({
paging : true,
pagingLength: 10,
lengthChange: true,
autoWidth: true,
searching: true,
bInfo: true,
bSort : true,
});
</script>
</body>
</html>
Есть ли более простой способ сделать это? Хороший ли это способ продолжать делать
list(infoDB.objects.value())
в цикле WHILE TRUE?