Aprende a representar un widget de paginador basado en Bootstrap 5 en una vista de lista basada en la clase Django.

En este ejemplo, usaré una implementación muy simple de una vista de lista en django, donde simplemente mostraré una vista con 10 elementos en la base de datos, así que paginaré por 1, así que puede ver un solo elemento representado en la vista en cada página. Todo lo que necesita hacer para paginar su modelo en un ListView es declarar y asignar un valor a paginate_by

from django.views.generic import ListView
from .models import Items

class ItemsListView(ListView):
    model = Items
    context_object_name = 'items'
    template_name = 'items/index.html'
    # Establezca el parámetro paginate_by en la cantidad de elementos que desea
    # aparecen en cada página de la vista
    paginate_by = 1

Luego, en su plantilla, puede simplemente iterar sobre cada elemento en el context_object_name, solo se representarán los elementos de la página:

<div class="container">
    <div class="row">
        {% comment %}
            En este bloque, mostraremos cada elemento en una cuadrícula de 4 columnas.
        {% endcomment %}
        {% for item in items %}
            <div class="col-lg-3">
                {{ item.id }}). {{ item.name }}
            </div>
        {% endfor %}
    </div>
</div>

Ahora, para representar el widget de paginación, puede usar el siguiente código que generará un widget de paginación de Bootstrap 5. Representará 4 botones de interacción cuando haya varias páginas para navegar (Primera página, Página anterior, Página siguiente y Última página), así como hasta 7 botones que contienen el número de páginas del paginador:

{% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1">
                        First
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                        Previous
                    </a>
                </li>
            {% endif %}

            {% for page_number in page_obj.paginator.page_range %}
                {% comment %}
                     Este condicional nos permite mostrar hasta 3 páginas antes y después de la página actual
                     Si decide eliminar este condicional, se mostrarán todas las páginas

                     Puede cambiar el 3 a cualquier número que desee, por ejemplo
                     Para mostrar solo 5 elementos de paginación, cambie el 3 a 2 (2 antes y 2 después de la página actual)
                {% endcomment %}
                {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
                    {% if page_obj.number == page_number %}
                        <li class="page-item active">
                            <a class="page-link" href="?page={{ page_number }}">
                                {{ page_number }}
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_number }}">
                                {{ page_number }}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                        Next
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">
                        Last
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}

Al final, su archivo de plantilla se verá así:

{% extends 'base.html' %}

{% block content %}    
    <div class="container">
        <div class="row">
            {% comment %}
                En este bloque, mostraremos cada elemento en una cuadrícula de 4 columnas.
            {% endcomment %}
            {% for item in items %}
                <div class="col-lg-3">
                    {{ item.id }}). {{ item.name }}
                </div>
            {% endfor %}
        </div>
    </div>

    {% comment %}
        Renderice un elemento de paginación basado en Bootstrap 5 con la paginación predeterminada de Django
    {% endcomment %}
    <div class="row">
        <div class="col-lg-12">
            {% if page_obj.has_other_pages %}
                <nav>
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">
                                    First
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                                    Previous
                                </a>
                            </li>
                        {% endif %}

                        {% for page_number in page_obj.paginator.page_range %}
                            {% comment %}
                                Este condicional nos permite mostrar hasta 3 páginas antes y después de la página actual
                                 Si decide eliminar este condicional, se mostrarán todas las páginas

                                 Puede cambiar el 3 a cualquier número que desee, por ejemplo
                                 Para mostrar solo 5 elementos de paginación, cambie el 3 a 2 (2 antes y 2 después de la página actual)
                            {% endcomment %}
                            {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
                                {% if page_obj.number == page_number %}
                                    <li class="page-item active">
                                        <a class="page-link" href="?page={{ page_number }}">
                                            {{ page_number }}
                                        </a>
                                    </li>
                                {% else %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_number }}">
                                            {{ page_number }}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                                    Next
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">
                                    Last
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
{% endblock %}

En mi plantilla (una plantilla personalizada basada en Bootstrap 5), una vez que se muestra esta página, el paginador se ve así:

Django Bootstrap 5 Paginator

Por supuesto, este es el widget de paginación predeterminado de Bootstrap, sin embargo, este es un buen punto de partida si está buscando una personalización adicional del widget en su proyecto Django.

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores