Listado Paginado con Bootstrap 5 y Django - 11

▶

El siguiente paso, es crear un listado paginado en Django como hicimos en capítulos anteriores:

mystore\elements\views.py

from django.shortcuts import render
from django.core.paginator import Paginator

from .models import Element

# Create your views here.

def index(request):
   elements = Element.objects.filter(type=2).all()
   paginator = Paginator(elements,10)
   page_number = request.GET.get('page')

   return render(request,'elements/index.html', {'elements': paginator.get_page(page_number)})
La operación de:
filter(type=2)

▶

Como puedes ver, un listado paginado en Django consiste en obtener todos los datos y emplear la clase Paginator de Django.

Corresponde al tipo de producto según los datos establecidos en Django Admin y que puedes configurar a gusto según el valor de la PK establecido.

Para el template, utilizamos el componente de carta:

mystore\elements\templates\elements\index.html

{% extends "base.html" %}

{% block content %}
   {% for e in elements %}
       <div class="card mt-2">
           <div class="card-header">
               <h4>{{e.title}}</h4>
           </div>
           <div class="card-body">
               <p>{{e.description}}</p>
           </div>
       </div>
   {% endfor %}

   {% include "partials\pagination.html" with page_obj=elements %}

{% endblock %}

El archivo de pagination.html, con el cual se construyen los enlaces de paginación empleando el componente de Bootstrap:

elements/templates/partials/pagination.html

<nav aria-label="Page navigation example">
 <ul class="pagination justify-content-center mt-3">

       {% if page_obj.has_previous %}
           <li class="page-item">
               <a class="page-link" href="?page={{ page_obj.previous_page_number }}">prev</a>
           </li>
       {% endif %}

       {% for i in page_obj.paginator.page_range %}

           {% if i == page_obj.number %}
               <li class="page-item active">
                   <a class="page-link" href="#">{{ i }}</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 }}">next</a>
           </li>
       {% endif %}
 </ul>
</nav>