Pagination

Pagination controls component.

template 3 required5 optional2 slots1 a11y rule

ReferenceGuide

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.current_page = 3
my_template.html
django
{% load theme_components %}
{% theme_pagination current_page=current_page total_pages=10 url_pattern='?page={}' %}

Props

NameTypeRequiredDefault
current_pageintrequired—
total_pagesintrequired—
url_patternstrrequired—
show_edgesboolTrue
css_prefixstr—
attrsdict—
slot_prevstr—
slot_nextstr—

Accessibility

RequirementElementAttributeValue
Pagination nav must have aria-labelnavaria-labelPagination

Slots

slot_prev slot_next
Source & styles
FilePathNotes
templatedjust_theming/components/pagination.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 7 of this component's classes at line 653, 658, 667, 668, 669, 691, 702. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_components/components.cssDefines 2 of this component's classes at line 381, 387. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--accent --accent-foreground --border --foreground --muted-foreground --primary --primary-foreground --radius
Template source — pagination.html
django
<nav class="{{ css_prefix }}pagination {% if attrs.class %}{{ attrs.class }}{% endif %}"
     aria-label="Pagination"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <ul class="{{ css_prefix }}pagination-list">
        <li>
            {% if slot_prev %}
            {{ slot_prev|safe }}
            {% elif current_page > 1 %}
            <a href="{{ prev_url }}" class="{{ css_prefix }}pagination-prev" aria-label="Previous page">&laquo; Prev</a>
            {% else %}
            <span class="{{ css_prefix }}pagination-prev {{ css_prefix }}pagination-disabled" aria-disabled="true">&laquo; Prev</span>
            {% endif %}
        </li>
        {% if show_edges and first_page != None %}
        <li><a href="{{ first_url }}" class="{{ css_prefix }}pagination-link">1</a></li>
        {% if first_ellipsis %}<li><span class="{{ css_prefix }}pagination-ellipsis">&hellip;</span></li>{% endif %}
        {% endif %}
        {% for page in page_range %}
        <li>
            {% if page.number == current_page %}
            <span class="{{ css_prefix }}pagination-link {{ css_prefix }}pagination-active" aria-current="page">{{ page.number }}</span>
            {% else %}
            <a href="{{ page.url }}" class="{{ css_prefix }}pagination-link">{{ page.number }}</a>
            {% endif %}
        </li>
        {% endfor %}
        {% if show_edges and last_page != None %}
        {% if last_ellipsis %}<li><span class="{{ css_prefix }}pagination-ellipsis">&hellip;</span></li>{% endif %}
        <li><a href="{{ last_url }}" class="{{ css_prefix }}pagination-link">{{ total_pages }}</a></li>
        {% endif %}
        <li>
            {% if slot_next %}
            {{ slot_next|safe }}
            {% elif current_page < total_pages %}
            <a href="{{ next_url }}" class="{{ css_prefix }}pagination-next" aria-label="Next page">Next &raquo;</a>
            {% else %}
            <span class="{{ css_prefix }}pagination-next {{ css_prefix }}pagination-disabled" aria-disabled="true">Next &raquo;</span>
            {% endif %}
        </li>
    </ul>
</nav>