Skip to content

Instantly share code, notes, and snippets.

@jmn
Created August 28, 2017 00:55
Show Gist options
  • Select an option

  • Save jmn/e6cb6cfdff087e024aa08ca0c633bd2e to your computer and use it in GitHub Desktop.

Select an option

Save jmn/e6cb6cfdff087e024aa08ca0c633bd2e to your computer and use it in GitHub Desktop.
Django pagination controls for Bootstrap 4
{% if is_paginated %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-left">
{% if page_obj.has_previous %}
<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#"><span>&laquo;</span></a></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="page-item active"><a class="page-link" href="#">{{ i }} <span class="sr-only">(current)</span></a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#"><span>&raquo;</span></a></li>
{% endif %}
</ul>
</nav>
{% endif %}
@prem911
Copy link
Copy Markdown

prem911 commented Jul 12, 2018

If there are 100 pages, do we see links for all 1-100 items?
How do we show prev, few pages links and next?

@dudanogueira
Copy link
Copy Markdown

dudanogueira commented Jul 18, 2018

Hi there! At this point you will see all the 100 pages. You can mix and match some more code, like here:
https://stackoverflow.com/questions/41131802/django-paginator-page-range-for-not-displaying-all-numbers

{% for i in items.paginator.page_range %}
    {% if l <= i.number|add:5 and l >= i.number|add:-5 %}
        <li><a href="?page={{forloop.counter}}">{{forloop.counter}}</a></li>
    {% endif %}
{% endfor %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment