如何在Django项目中组织大量页面的分页? [英] How organize pagination with a large number of pages in Django project?

问题描述

我有一个 view.py product_list:

<代码>...从 django.shortcuts 导入渲染，get_object_or_404从 .models 导入 ProductCategory、Product、ProductDetail、ProductSpecialCategory从 django.core.paginator 导入分页器、EmptyPage、PageNotAnInteger...def product_list(request, category_slug=None, ):类别 = 无类别 = ProductCategory.objects.all()object_list = Product.objects.filter(available=True, is_active=True)如果 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')尝试:产品 = paginator.page(page)除了 PageNotAnInteger:产品 = paginator.page(1)除了 EmptyPage:产品 = paginator.page(paginator.num_pages)返回渲染(请求，'shop/products/list_by_category/product_list.html'，{'category':类别，类别":类别，'产品':产品，})

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

<ul class=分页">{% 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=真"></i></a>{％ 万一 ％}{% for i in page.paginator.page_range %}{% if page.number == i %}<li class="page-itemfocused"><a class="page-link"href=?page={{ i }}">{{ i }}</a></li>{% elif i >page.number|add:'-1' 和 i <页码|添加:'1' %}{％ 别的 ％}<li class="page-item"><a class="page-link"href=?page={{ i }}">{{ i }}</a></li>{％ 万一 ％}{% 结束为 %}{% 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=真"></i></a>{％ 万一 ％}

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

我想这样组织:

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

解决方案

我更改了 pagination.html.请试试这个.

<div class="row">{% if page.end_index >0%}<div类=col-sm-12 col-md-5 d-none d-md-block"><p>显示 {{ page.start_index }} 到 {{ page.end_index }} 的 {{ page.paginator.count}}.</p>

{％ 万一 ％}{% if page.paginator.num_pages >1%}<div class="col-sm-12 col-md-7 dataTables_pager"><ul class=分页">{% if page.has_previous %}<li class="page-item"><a class="page-link";数据页=1"href=?page={{ page.previous_page_number }}"><i class="fa fa-angle-double-left"></i></a>{% if page.previous_page_number >1%}<li class="page-item"><a class="page-link";数据页={{page.previous_page_number}}"；href=?page={{ page.previous_page_number }}"><i class="fa fa-angle-left"></i></a>{％ 万一 ％}{％ 万一 ％}{% 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 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 class="page-item active"><span class="page-link">{{ page.number }}</span></li>{% if page.paginator.num_pages >页码|添加: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 class="page-item"><a class="page-link";data-page="{{page.number|add:'2'}}";href=?page={{page.number|add:'2'}}">{{ page.number|add:2";}} </a>{％ 万一 ％}{% if page.has_next %}<li class="page-item"><a class="page-link";数据页={{page.next_page_number}}"；href=?page={{ page.next_page_number }}"><i class="fa fa-angle-right"></i></a><li class="page-item"><a class="page-link";数据页={{page.paginator.num_pages}}"；href=?page={{page.paginator.num_pages}}"&​​gt;<i class="fa fa-angle-double-right"></i></a>{％ 万一 ％}

{％ 万一 ％}

</nav>

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

I have a 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,
                                                                            })

Based on this handler, I did 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>

On the interface, I get the **result**:

I would like to organize in such a way that:

Show only three pages, the first of which is the previous one, the second is the current, the third is the next. And what is not included in this range are hidden by ellipses, for example.:

解决方案

I change pagination.html. Please try this.

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

My design just like this. If you change design for your needs. Here click << to go first page , >> to go last page , < to go previous page and > to go next page.

这篇关于如何在Django项目中组织大量页面的分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！