Bagaimana mengatur paginasi dengan sejumlah besar halaman dalam proyek Django?

Question

Saya memiliki 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,
                                                                            })

Berdasarkan handler ini, saya melakukan 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>

Di antarmuka, saya mendapatkan ** hasil **:

Saya ingin mengatur sedemikian rupa sehingga:

Tampilkan hanya tiga halaman, yang pertama adalah yang sebelumnya, yang kedua adalah yang sekarang, yang ketiga adalah yang berikutnya. Dan apa yang tidak termasuk dalam kisaran ini disembunyikan oleh elipsis, misalnya. :

Answer 1

Saya mengubah pagination.html . Silakan coba ini.

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

Desain saya seperti ini. Jika Anda mengubah desain untuk kebutuhan Anda. Di sini klik <<untuk ke halaman pertama, >>untuk ke halaman terakhir, <untuk ke halaman sebelumnya dan >untuk ke halaman berikutnya.