Django Pagination with Bulma CSS

We needed django pagination in a small project, I edited a piece of code that was visually compatible for bulma css you may need to make some changes to the code (design, structural or general)

Follow the steps below to add to the template, First, let’s create our file that we are going to add.

{% include "include/__pagination.html" %}

then replace the contents of the file with the below

{% if list.has_other_pages %}
    <div class="column">
        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
            <ul class="pagination-list">
                {% if list.has_previous %}
                    <li><a class="pagination-link" aria-label="page"
                           href="?page={{ list.previous_page_number }}">&laquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                {% endif %}
                {% for i in list.paginator.page_range %}
                    {% if list.number == i %}
                        <li><a class="pagination-link is-current" aria-label="Page {{ i }}"
                               aria-current="page">{{ i }}</a></li>
                    {% else %}
                        <li><a class="pagination-link" aria-label="Goto page {{ i }}" href="?page={{ i }}">{{ i }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                {% if list.has_next %}
                    <li><a class="pagination-link" aria-label="Goto page {{ list.next_page_number }}"
                           href="?page={{ list.next_page_number }}">&raquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endif %}

Finally, add to the templates you need pagination, now you have a proper pagination template. If you want, you can make minor improvements.

Share this:

Leave a Comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.