Отображение моделей Django из базы данных с помощью цикла for в таблице HTML

В моем views.py я добавляю все транзакции из базы данных в контекст запроса. Я хочу отобразить данные в таблице приборной панели. Как мне это сделать с помощью цикла for?

Я могу использовать следующее, чтобы вывести все данные, но они не помещаются в таблицу.

{% for transaction in transactions %}
{{transaction.date}} {{transaction.event}} {{transaction.total}}
{% endfor %}

HTML-код

<div class="sales-boxes">
        <div class="recent-sales box">
          <div class="title">Transaction history</div>
          <div class="sales-details">
            <ul class="details">
              <li class="topic">Date</li>
              <li><a href="#">Date 1</a></li>
              <li><a href="#">Date 2</a></li>
            </ul>
            <ul class="details">
            <li class="topic">Event</li>
            <li><a href="#">Event 1</a></li>
            <li><a href="#">Event 2</a></li>
          </ul>
          
          <ul class="details">
            <li class="topic">Total</li>
            <li><a href="#">$1</a></li>
            <li><a href="#">$2</a></li>
          </ul>
          </div>
          <div class="button">
            <a href="#">See All</a>
          </div>
        </div>

Мой код views.py, используемый для рендеринга страницы

from .models import Transaction

def earner_dashboard(request):
    transactions = Transaction.objects.all()
    return render(request, 'dashboard.html', context={"transactions":transactions})

Вы можете использовать bootstrap для создания колонок.

<div class="sales-boxes">
    <div class="recent-sales box">
      <div class="title">Transaction history</div>
      <div class="row">
          <div class="col-4"> Date </div>
          <div class="col-4"> Event </div>
          <div class="col-4"> Total </div>
      </div>
      {% for transaction in transactions %}
      <div class="row">
          <div class="col-4"> {{transaction.date}} </div>
          <div class="col-4"> {{transaction.event}} </div>
          <div class="col-4"> {{transaction.total}} </div>
      </div>
      {% endfor %}

Не забудьте связать bootstrap с вашим проектом, добавив эти строки в голову файла базового шаблона.

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>

Вы можете использовать тег table в HTML, но он устаревает. Более того, bootstrap гораздо удобнее в использовании.

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