Django Pagination - how to reduce number of displayed links?

Question

I'd like to display << 1 2 3 4... 11 12 >> instead of << 1 2 3 4 5 6 7 8 9 10 11 12>> in my Django site and using pagination.

This is what I get currently :

My html code :

<div class="row">
    <div class="col-md-12">
      {% if jokes.has_other_pages %}
      <ul class="pagination">
         {% if jokes.has_previous %}
           <li class="page-item">
             <a href="?page={{jokes.previous_page_number}}" class="page-link">&laquo;</a>
           </li>
         {% else %}  
          <li class="page-item disabled">
            <a class="page-link">&laquo;</a>
          </li>
         {% endif %}
         {% for i in jokes.paginator.page_range %}
          {% if jokes.number == i %}
            <li class="page-item active">
             <a class="page-link">{{i}}</a>
            </li>
          {% else %}
           <li class="page-item">
             <a href="?page={{i}}" class="page-link">{{i}}</a>
           </li>
          {% endif %}
         {% endfor %}
         {% if jokes.has_next %}
         <li class="page-item">
           <a href="?page={{jokes.next_page_number}}" class="page-link">&raquo;</a>
         </li>
       {% else %}  
        <li class="page-item disabled">
          <a class="page-link">&raquo;</a>
        </li>
       {% endif %}
      </ul>
      {% endif %}
    </div>

Thanks in advance !

A good solution is to create your own Paginator class, but it's a bit too much effort to write one as an answer. Perhaps if you make an attempt and come back if you get stuck it'd be better. The docs are here: https://docs.djangoproject.com/en/3.0/ref/paginator/ - there are also some good answers here: https://stackoverflow.com/questions/30864011/display-only-some-of-the-page-numbers-by-django-pagination — Tom Carrick, May 08 '20 at 19:10

score 0 · Answer 1 · answered May 08 '20 at 18:13

Here is a flask example, which should give you a good starting point:

<div style="margin:25px 20% 100px 20%;">
{% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
  {% if page_num %}
    {% if posts.page == page_num %}
      <a class="btn btn-info mb-4" href=" {{ url_for('myposts', page=page_num) }}">{{ page_num }}</a>   
    {% else %}
      <a class="btn btn-outline-info mb-4" href=" {{ url_for('myposts', page=page_num) }}">{{ page_num }}</a>
    {% endif %}
   {% else %}
        ...
   {% endif %}
{% endfor %}
</div>

Amir big · Answer 2 · 2020-05-08T21:06:57.663

you can use it like this

        {% if jokes.has_previous %}
            <a href="?page=1">first</a>
            <a href="?page={{ jokes.previous_page_number }}">{{ jokes.previous_page_number }}</a>
        {% endif %}

        <span class="current">
             {{ jokes.number }} 
        </span>

        {% if jokes.has_next %}
            <a href="?page={{ jokes.next_page_number }}">{{ jokes.next_page_number }}</a>
            <a href="?page={{ jokes.paginator.num_pages }}">last </a>
        {% endif %}

it will result like:

first 4 5 6 last

4 is previous page
5 is current page
6 is next page

Django Pagination - how to reduce number of displayed links?

2 Answers2