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?

Вернуться на верх