Pazartesi, Ekim 7, 2024

Django Pagination with Bulma CSS

yüksek çözünürlüklü yeşil renkli orjinal django logosu

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.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir