Django ListView 分页功能：从配置到模板实现的完整指南

from django.views.generic import ListView
from .models import Product # 假设您的产品模型名为 Product

class ProductListView(ListView):
    model = Product  # 指定要展示的模型
    template_name = 'Genesis/home.html'  # 指定模板文件路径
    context_object_name = 'page_obj'  # 在模板中访问分页对象的名称
    paginate_by = 8  # 每页显示8个产品

    def get_context_data(self, **kwargs):
        """
        获取额外的上下文数据。
        此方法用于向模板传递除分页数据外的其他信息，例如所有产品类别。
        """
        context = super().get_context_data(**kwargs)
        # 示例：获取所有产品类别，如果需要的话
        # 实际应用中，如果数据量大，应优化此查询或在视图外处理
        categories = Product.objects.all()
        context['categories'] = [
            {'Product Type': category.Product_Type, 'Product Name': category.Product_Name}
            for category in categories
        ]
        return context

{% if page_obj.object_list %}
  <div class="row" id="product-container">
    {% for product in page_obj.object_list %}
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="card">
          <!-- 产品图片 -->
          <div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light" data-mdb-ripple-color="light">
            <img src="{{ product.first_image.Product_Image.url }}" alt="Product Image" class="w-100" />
            <a href="#!">
              <div class="mask">
                <div class="d-flex justify-content-start align-items-end h-100">
                  <h5><span class="badge bg-primary ms-2">New</span></h5>
                </div>
              </div>
              <div class="hover-overlay">
                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
              </div>
            </a>
          </div>
          <div class="card-body">
            <div class="text-center">
              <!-- 产品名称 -->
              <h5 class="fw-bolder">{{ product.Product_Type }}</h5>
              <!-- 产品价格 -->
              $40.00 - $80.00
            </div>
          </div>
          <!-- 产品操作 -->
          <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
            <div class="text-center">
              <a class="btn btn-outline-dark mt-auto" href="#">View Product</a>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% else %}
  <p class="text-center">No Products Available</p>
{% endif %}

<nav aria-label="Page navigation ">
  <ul class="pagination justify-content-center">
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
      {% if page_obj.number == num %}
        <li class="page-item active" aria-current="page"><a class="page-link" href="#">{{ num }}</a></li>
      {% else %}
        <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
      {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>