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

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 article
Shareable URL
Prev Post

Debian Desktop Kurulumu: Yeni Başlayanlar için Rehber

Next Post

Güncel Google Dorklar ve Google Hacking

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Read next
1
Share