在 HTML 表中使用 for 循环显示数据库中的 Django 模型答案

【问题标题】：Display Django models from database using for loop in HTML table在 HTML 表中使用 for 循环显示数据库中的 Django 模型
【发布时间】：2021-08-08 12:17:20
【问题描述】：

在我的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})

【问题讨论】：

标签： python html django

【解决方案1】：

您可以使用引导程序创建列。

<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 %}

不要忘记通过将这些行添加到基本模板文件的头部来将引导程序链接到您的项目。

   <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'>

您可以使用 HTML 的 table 标签，但已经过时了。而且，bootstrap 使用起来更方便。

【讨论】：