html - 如何在Django项目中组织大量页面的分页？

Question

我有一个view.py product_list：

...
from django.shortcuts import render, get_object_or_404
from .models import ProductCategory, Product, ProductDetail, ProductSpecialCategory
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
...
def product_list(request, category_slug=None, ):
category = None
categories = ProductCategory.objects.all()
object_list = Product.objects.filter(available=True, is_active=True)
if category_slug:
    category = get_object_or_404(ProductCategory, slug=category_slug)
    object_list = object_list.filter(category=category)
paginator = Paginator(object_list, 1)
page = request.GET.get('page')
try:
    products = paginator.page(page)
except PageNotAnInteger:
    products = paginator.page(1)
except EmptyPage:
    products = paginator.page(paginator.num_pages)
return render(request, 'shop/products/list_by_category/product_list.html', {'category': category,
                                                                            'categories': categories,
                                                                            'products': products,
                                                                            })

基于这个处理程序，我做了pagination.html：

<nav aria-label="pagination" class="pagination_area">
<ul class="pagination">
    {% if page.has_previous %}
        <li class="page-item next">
            <a class="page-link" href="?page={{ page.previous_page_number }}">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </a>
        </li>
    {% endif %}
    {% for i in page.paginator.page_range %}
        {% if page.number == i %}
            <li class="page-item focused"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
            {% elif i > page.number|add:'-1' and i < page.number|add:'1' %}
            {% else %}
            <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
    {% endfor %}
    {% if page.has_next %}
        <li class="page-item next">
            <a class="page-link" href="?page={{ page.next_page_number }}">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
        </li>
    {% endif %}
</ul>

在界面上，我得到**结果**：

我想以这样的方式组织：

只显示三页，第一页是上一页，第二页是当前页，第三页是下一页。例如，未包含在此范围内的内容会被省略号隐藏。：

标签： htmlpython-3.xdjangodjango-viewsdjango-templates

Answer 1

我改变pagination.html。请试试这个。

<nav aria-label="pagination" class="pagination_area">
<div class="row">
  {% if page.end_index > 0 %}
  <div class="col-sm-12 col-md-5 d-none d-md-block">
    <p>Showing {{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count}}.</p>
  </div>
  {% endif %}
  {% if page.paginator.num_pages > 1 %}
  <div class="col-sm-12 col-md-7 dataTables_pager">
    <ul class="pagination">
      {% if page.has_previous %}

        <li class="page-item">
          <a class="page-link" data-page="1" href="?page={{ page.previous_page_number }}">
            <i class="fa fa-angle-double-left"></i>
          </a>
        </li>
        {% if page.previous_page_number > 1 %}
          <li class="page-item">
            <a class="page-link " data-page="{{page.previous_page_number}}"  href="?page={{ page.previous_page_number }}">
              <i class="fa fa-angle-left"></i>
            </a>
          </li>
        {% endif %}

      {% endif %}

      {% if page.previous_page_number > 2 %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'-2'}}" href="?{{page.number|add:'-2'}}"> {{ page.number|add:"-2" }} </a>
         </li>
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'-1'}}" href="?page={{page.number|add:'-1'}}"> {{ page.number|add:"-1" }} </a>
        </li>
      {% endif %}

      <li class="page-item active"><span class="page-link ">{{ page.number }}</span></li>

      {% if page.paginator.num_pages > page.number|add:"2" %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'1'}}" href="?page={{page.number|add:'1'}}"> {{ page.number|add:"1" }} </a>
        </li>
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'2'}}" href="?page={{page.number|add:'2'}}"> {{ page.number|add:"2" }} </a>
        </li>
      {% endif %}

      {% if page.has_next %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.next_page_number}}" href="?page={{ page.next_page_number }}">
            <i class="fa fa-angle-right"></i>
          </a>
        </li>

        <li class="page-item">
          <a class="page-link " data-page="{{page.paginator.num_pages}}" href="?page={{page.paginator.num_pages}}">
            <i class="fa fa-angle-double-right"></i>
          </a>
        </li>
      {% endif %}
    </ul>
  </div>
  {% endif %}
</div>
</nav>

我的设计就是这样。如果您根据需要更改设计。在这里点击<<转到第一页，>>转到最后一页，<转到上一页和>转到下一页。