如何对 HTML 中显示的卡片顺序进行排序？答案

【问题标题】：How can you sort the order of cards displayed in HTML?如何对 HTML 中显示的卡片顺序进行排序？
【发布时间】：2020-10-10 01:09:46
【问题描述】：

我正在使用 Python 和 Django 构建网站。我正在使用 Bootstrap 和 HTML 制作主页的粗略版本。我有一组卡片，上面写着时间（即“12:00AM”或“2:30PM”）。如何按从早到晚的顺序对这些卡片进行排序？

下面是我的代码。我将随机数据放在那里，因为我从 Django 获取真实数据。

body {
  background: #272C31;
  color: #FFFFFF;
  margin-top: 5rem;
}

<div class="container py-2">
    <h1>Reservation Home</h1>
    <div class="row">
        <div class="col-md-6">
            <div class="card-group">
                <div class="card card text-white bg-dark" style="flex-grow:.39">
                    <div class="card-body">
                        <h2 class="card-title"> 3:00 </h2>
                        <h2 class="card-title"> PM </h2>
                    </div>
                </div>
                <div class="card text-white bg-dark ">
                    <div class="card-body">
                        <h4 class="card-title"> Joe </h4>
                        <p class="card-text"> Member ID: abc </p>
                        <p class="card-text"> Number of Guests: 3</p>
                    </div>
                </div>
            </div>
            <div class="card-group">
                <div class="card card text-white bg-dark" style="flex-grow:.39">
                    <div class="card-body">
                        <h2 class="card-title"> 12:00 </h2>
                        <h2 class="card-title"> AM </h2>
                    </div>
                </div>
                <div class="card text-white bg-dark ">
                    <div class="card-body">
                        <h4 class="card-title"> Jeff </h4>
                        <p class="card-text"> Member ID: xyz </p>
                        <p class="card-text"> Number of Guests: 2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

编辑：views.py

from django.shortcuts import render
from .models import Reservation
# Create your views here.
    
def home(request):
    context = {
        'reservations' : Reservation.objects.all()
    }
    return render(request, 'reservation/reservation.html', context)

models.py：

from django.db import models
# Create your models here.

class Reservation(models.Model):
    choices = (
        ('AM', 'AM'),
        ('PM', 'PM')
    )
    name = models.CharField(max_length=40)
    member_id = models.CharField(max_length=10, default="")
    guest_num = models.IntegerField()
    reserve_time = models.CharField(max_length=7)
    AM_PM = models.CharField(
        max_length=2,
        choices= choices,
        default= "PM",
    )


    def __str__(self):
        return f"{self.name} at {self.reserve_time}{self.AM_PM}"

【问题讨论】：

如果您没有使用 Django 预先对它们进行排序stackoverflow.com/questions/43645828/…，您可以查看此问题并使用 JS 在页面上对其进行排序
可以添加views.py
@AhmedKhairy 我添加了views.py

标签： python html django sorting

【解决方案1】：

可以在views.py中试试：

def home(request):
    context = {
        'reservations' : Reservation.objects.all().order_by('-reserve_time')
    }
    return render(request, 'reservation/reservation.html', context)

您还应该让您更轻松地在 models.py 中选择时间：

reserve_time = models.DateTimeField(default=timezone.now)

【讨论】：

它看起来像是从最新到最早排序的。有什么办法可以让较早的时间先出现？
@NicholasMamisashvili 如果您将其更新为 ``` order_by('reserve_time') ``` 是否有效？
@NicholasMamisashvili 检查您选择所需时间的更新答案
它有效，谢谢！如果是上午/下午，它有办法计算吗？
太棒了！这就是为什么我建议将模型更改为 DateTimeField。