Display only some of the page numbers by django pagination

Robin picture Robin · Jun 16, 2015 · Viewed 25.6k times · Source

I am using the django paginator in the template. Its working ok, but not good when there's large numbers of 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
        })

snippet of the template:

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

Now it looks like this:

enter image description here

What do I do to display only 7 page numbers and not all of it ranging from the current page number, like this:

Prev 1 (2) 3 4 5 Next

I hope I was clear, if not please ask. Your help and guidance will be very much appreciated. Thank you.

Answer

Rob L picture Rob L · Sep 20, 2017

Gonna throw this in. I came up with it because it lets you know there are more pages on either side.

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

And it looks like this:

Paging with elipses