web-dev-qa-db-fra.com

Afficher uniquement certains des numéros de page par pagination Django

J'utilise le paginateur Django dans le modèle. Cela fonctionne bien, mais pas bon quand il y a un grand nombre de pages.

views.py:

def blog(request):
    blogs_list = Blog.objects.all()

    paginator = Paginator(blogs_list, 1)

    try:
        page = int(request.GET.get('page', '1'))
    except:
        page = 1

    try:
        blogs = paginator.page(page)
    except(EmptyPage, InvalidPage):
        blogs = paginator.page(page)
    return render(request, 'blogs.html', {
        'blogs':blogs
        })

extrait du modèle:

  <div class="prev_next">

    {% if blogs.has_previous %}
      <a class="prev btn btn-info" href="?page={{blogs.previous_page_number}}">Prev</a>
    {% endif %}
    {% if blogs.has_next %}
      <a class="next btn btn-info" href="?page={{blogs.next_page_number}}">Next</a>
    {% endif %}
    <div class="pages">
      <ul>
      {% for pg in blogs.paginator.page_range %}
        {% if blogs.number == pg %}
          <li><a href="?page={{pg}}" class="btn btn-default">{{pg}}</a></li>
        {% else %}
          <li><a href="?page={{pg}}" class="btn">{{pg}}</a></li>
        {% endif %}
      {% endfor %}
      </ul>
    </div>
    <span class="clear_both"></span>

  </div>

Maintenant ça ressemble à ça:

enter image description here

Que dois-je faire pour afficher uniquement les numéros de page 7 et pas tous depuis le numéro de page actuel, comme ceci:

Prev 1 (2) 3 4 5 Next

J'espère avoir été clair, sinon demandez s'il vous plaît. Votre aide et vos conseils seront très appréciés. Je vous remercie.

djangodjango-pagination
21
Robin

Tout d'abord, je voudrais changer ce qui suit:

try:
    blogs = paginator.page(page)
except(EmptyPage, InvalidPage):
    blogs = paginator.page(page)  # Raises the same error

Mais vous pouvez passer une plage dans votre contexte.

index = paginator.page_range.index(blogs.number)
max_index = len(paginator.page_range)
start_index = index - 3 if index >= 3 else 0
end_index = index + 3 if index <= max_index - 3 else max_index
page_range = paginator.page_range[start_index:end_index]

Vous devriez maintenant pouvoir parcourir la plage pour construire les bons liens avec ?page=. 

=== Modifier ===
Votre vue ressemblerait à ceci:

def blog(request):
    paginator = Paginator(Blog.objects.all(), 1)

    try:
        page = int(request.GET.get('page', '1'))
    except:
        page = 1

    try:
        blogs = paginator.page(page)
    except(EmptyPage, InvalidPage):
        blogs = paginator.page(1)

    # Get the index of the current page
    index = blogs.number - 1  # edited to something easier without index
    # This value is maximum index of your pages, so the last page - 1
    max_index = len(paginator.page_range)
    # You want a range of 7, so lets calculate where to slice the list
    start_index = index - 3 if index >= 3 else 0
    end_index = index + 3 if index <= max_index - 3 else max_index
    # Get our new page range. In the latest versions of Django page_range returns 
    # an iterator. Thus pass it to list, to make our slice possible again.
    page_range = list(paginator.page_range)[start_index:end_index]

    return render(request, 'blogs.html', {
        'blogs': blogs,
        'page_range': page_range,
    })

Nous devons maintenant modifier votre modèle pour accepter notre nouvelle liste de numéros de page:

<div class="prev_next">
    {% if blogs.has_previous %}
        <a class="prev btn btn-info" href="?page={{blogs.previous_page_number}}">Prev</a>
    {% endif %}
    {% if blogs.has_next %}
        <a class="next btn btn-info" href="?page={{blogs.next_page_number}}">Next</a>
    {% endif %}
    <div class="pages">
        <ul>
        {% for pg in page_range %}
            {% if blogs.number == pg %}
                <li><a href="?page={{pg}}" class="btn btn-default">{{pg}}</a></li>
            {% else %}
                <li><a href="?page={{pg}}" class="btn">{{pg}}</a></li>
            {% endif %}
        {% endfor %}
        </ul>
    </div>
    <span class="clear_both"></span>
</div>
20
Blackeagle52

Je vais en parler. Je l’ai imaginé car cela vous permet de savoir qu’il ya plus de pages de chaque côté.

<ul class="pagination">

{% if page_obj.has_previous %}
    <li><a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
{% else %}
    <li class="disabled"><span><i class="fa fa-chevron-left" aria-hidden="true"></i></span></li>
{% endif %}

{% if page_obj.number|add:'-4' > 1 %}
    <li><a href="?page={{ page_obj.number|add:'-5' }}">&hellip;</a></li>
{% endif %}

{% for i in page_obj.paginator.page_range %}
    {% if page_obj.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
    {% Elif i > page_obj.number|add:'-5' and i < page_obj.number|add:'5' %}
        <li><a href="?page={{ i }}">{{ i }}</a></li>
    {% endif %}
{% endfor %}

{% if page_obj.paginator.num_pages > page_obj.number|add:'4' %}
    <li><a href="?page={{ page_obj.number|add:'5' }}">&hellip;</a></li>
{% endif %}

{% if page_obj.has_next %}
    <li><a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
{% else %}
    <li class="disabled"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></li>
{% endif %}

</ul>

Et ça ressemble à ça:

 Paging with elipses

31
Rob L

Une autre solution plus courte avec un modèle est de comparer le compteur actuel forloop avec une certaine plage.

avec bootstrap j'utilise ce template

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

{% for n in page_obj.paginator.page_range %}
  {% if page_obj.number == n %}
    <li class="page-item active">
      <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
    </li>
  {% Elif n > page_obj.number|add:'-3' and n < page_obj.number|add:'3' %}
    <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
  {% endif %}
{% endfor %}

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

capture d'écran

18
Pavel1114

J'ai trouvé que la chose la plus simple à faire était de créer un extrait de pagination ne montrant que les pages que vous souhaitez.

Dans mon cas, je ne voulais pas de liens précédents ou suivants. Je voulais juste avoir toujours un lien vers la première et la dernière page et ensuite avoir la page actuelle et les deux pages de chaque côté de la page actuelle.

Mon extrait de modèle (utilise les variables de Django-tables2 - les variables auront des noms légèrement différents si vous utilisez directement une variable Django Paginator)

{% load Django_tables2 %}
{% load humanize %}
{% load i18n %}

{% if table.page %}
  {% with table.page.paginator.count as total %}
    {% with table.page.number as page_num %}
      {% with table.page.paginator.num_pages as num_pages %}
        {% block pagination %}
          <div class="row">
            <div class="col-md-12">    
              {% if table.paginator.num_pages > 1 %}
                <ul class="pagination pull-right">
                  {% for n in table.page.paginator.page_range %}
                    {% if table.page.number|add:'-3' == n %}
                      {# First page #}
                      <li><a href="{% querystring table.prefixed_page_field=1 %}">1</a></li>
                      {% if n != 1 %}
                        <li class="disabled"><a>&#8943;</a></li>
                      {% endif %}
                    {% Elif table.page.number == n %}
                      {# Current page #}
                      <li class="active"><a href="#">{{ n }}</a></li>
                    {% Elif table.page.number|add:'-3' < n and n < table.page.number|add:'3' %}
                      {# Pages around current page #}
                      <li><a href="{% querystring table.prefixed_page_field=n %}">{{ n }}</a></li>
                    {% Elif table.page.number|add:'3' == n %}
                      {# Last page #}
                      {% if n != num_pages %}
                        <li class="disabled"><a>&#8943;</a></li>
                      {% endif %}
                      <li><a href="{% querystring table.prefixed_page_field=num_pages %}">{{ num_pages }}</a></li>
                    {% endif %}
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
          </div>
        {% endblock pagination %}
      {% endwith %}
    {% endwith %}
  {% endwith %}
{% endif %}

Exemples de ma pagination sur différentes pages

 1

 2

 3

 4

 5

 6

Crédit: cela a été inspiré par la réponse de @ Pavel1114

5
Inti

Vous pouvez également étendre la classe Paginator.

class BootstrapPaginator(Paginator):
    def __init__(self, *args, **kwargs):
        """        
        :param wing_pages: How many pages will be shown before and after current page.
        """
        self.wing_pages = kwargs.pop('wing_pages', 3)
        super(BootstrapPaginator, self).__init__(*args, **kwargs)

    def _get_page(self, *args, **kwargs):
        self.page = super(BootstrapPaginator, self)._get_page(*args, **kwargs)
        return self.page

    @property
    def page_range(self):
        return range(max(self.page.number - self.wing_pages, 1),
                     min(self.page.number + self.wing_pages + 1, self.num_pages + 1))

Puis dans le template:

{% for num in action_list.paginator.page_range %}
    {% if action_list.number == num %}
         <li class="active"><a href="?page={{ num }}">{{ num }}</a></li>
    {% else %}
         <li><a href="?page={{ num }}">{{ num }}</a></li>
    {% endif %}
{% endfor %}

Désormais, page_range ne comprendra que 7 éléments. wing_pages + page actuelle + wing_pagespaginateur Django personnalisé pour bootstrap

1
tsh

Je l'ai fait uniquement sur des modèles avec des expressions:

{% if is_paginated %}
    <div class="text-center">
        <ul class="pagination pagination-sm">
            {% if page_obj.number >= 5 %}
            <li><a href="?page=1">1</a></li>
            <li><span>...</span></li>
            {% Elif page_obj.number == 4 %}
            <li><a href="?page=1">1</a></li>
            {% endif %}
            {% if page_obj.number|add:"-2" >= 1  %}
            <li><a href="?page={{ page_obj.number|add:"-2" }}">{{ page_obj.number|add:"-2" }}</a></li>
            {% endif %}
            {% if page_obj.number|add:"-1" >= 1  %}
            <li><a href="?page={{ page_obj.number|add:"-1" }}">{{ page_obj.number|add:"-1" }}</a></li>
            {% endif %}
            <li class="active"><a href="?page={{ page_obj.number }}">{{ page_obj.number }}</a></li>
            {% if page_obj.number|add:"1" <= paginator.num_pages  %}
            <li><a href="?page={{ page_obj.number|add:"1" }}">{{ page_obj.number|add:"1" }}</a></li>
            {% endif %}
            {% if page_obj.number|add:"2" <= paginator.num_pages %}
            <li><a href="?page={{ page_obj.number|add:"2" }}">{{ page_obj.number|add:"2" }}</a></li>
            {% endif %}
            {% if page_obj.number|add:"2" <= paginator.num_pages|add:"-2" %}
            <li><span>...</span></li>
            <li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% Elif page_obj.number|add:"1" <= paginator.num_pages|add:"-2" %}
            <li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% endif %}
        </ul>
    </div>
{% endif %}

Je sais que Django est comme "n'écris plus ton code" mais j'ai trouvé cela plus facile à comprendre maintenant. J'espère que j'ai aidé.

0
Rafael Marques