Skip to content

Instantly share code, notes, and snippets.

@jmn
Created August 28, 2017 00:55
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmn/e6cb6cfdff087e024aa08ca0c633bd2e to your computer and use it in GitHub Desktop.
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 %}
@dudanogueira
Copy link

Thanks!

here goes a little improvement as you can call page_obj.paginator.page_range, and easy the usage with {% with %}

        {% with blogpages as items %}
            {% if items.has_other_pages %}
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-left">
                        {% if items.has_previous %}
                            <li class="page-item"><a class="page-link" href="?page={{ items.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 items.paginator.page_range %}
                            {% if items.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 items.has_next %}
                            <li class="page-item"><a class="page-link" href="?page={{ items.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 %}
        {% endwith %}

@prem911
Copy link

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

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