In this recipe, we will use Django pagination to display a paginated list of Item
s and add Bootstrap 5 styles. Replace the Item
class with any Django model in your own project.
Create the paginated list
In the View, such as in the get_context
method of a class-based view:
# Add these imports at the top of your View file
from django.core.paginator import (
Paginator,
EmptyPage,
PageNotAnInteger,
)
# Then, in the view, such as the get_context method:
# Get page number from request,
# default to first page
default_page = 1
page = request.GET.get('page', default_page)
# Get queryset of items to paginate
items = Item.objects.all()
# Paginate items
items_per_page = 10
paginator = Paginator(items, items_per_page)
try:
items_page = paginator.page(page)
except PageNotAnInteger:
items_page = paginator.page(default_page)
except EmptyPage:
items_page = paginator.page(paginator.num_pages)
# Provide filtered, paginated library items
context["items_page"] = items_page
Render the paginated items and paginator widget
Once you have passed the paginated items to the template, render the items along with a paginated button group.
{% if items_page %}
{% for item in items_page %}
<div class="card mb-1">
<div class="card-body">
<p class="card-title">{{ item.title }}</p>
</div>
</div>
{% endfor %}
{% if items_page.has_other_pages %}
<div class="btn-group" role="group" aria-label="Item pagination">
{% if items_page.has_previous %}
<a href="?page={{ items_page.previous_page_number }}" class="btn btn-outline-primary">«</a>
{% endif %}
{% for page_number in items_page.paginator.page_range %}
{% if items_page.number == page_number %}
<button class="btn btn-outline-primary active">
<span>{{ page_number }} <span class="sr-only">(current)</span></span>
</button>
{% else %}
<a href="?page={{ page_number }}" class="btn btn-outline-primary">
{{ page_number }}
</a>
{% endif %}
{% endfor %}
{% if items_page.has_next %}
<a href="?page={{ items_page.next_page_number }}" class="btn btn-outline-primary">»</a>
{% endif %}
</div>
{% endif %}
{% else %}
<p>No items found.</p>
{% endif %}
Top comments (0)