mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 06:51:09 -05:00
62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
{% comment %}
|
|
Pagination Component
|
|
====================
|
|
|
|
A reusable pagination component with accessibility features and HTMX support.
|
|
|
|
Purpose:
|
|
Renders pagination controls for paginated querysets. Supports both
|
|
standard page navigation and HTMX-powered dynamic updates.
|
|
|
|
Usage Examples:
|
|
Standard pagination:
|
|
{% include 'components/pagination.html' with page_obj=page_obj %}
|
|
|
|
HTMX-enabled pagination:
|
|
{% include 'components/pagination.html' with page_obj=page_obj use_htmx=True hx_target='#results' %}
|
|
|
|
Custom styling:
|
|
{% include 'components/pagination.html' with page_obj=page_obj size='sm' %}
|
|
|
|
Parameters:
|
|
- page_obj: Django Page object from paginator (required)
|
|
- use_htmx: Enable HTMX for dynamic updates (optional, default: False)
|
|
- hx_target: HTMX target selector (optional, default: '#results')
|
|
- hx_swap: HTMX swap strategy (optional, default: 'innerHTML')
|
|
- hx_push_url: Whether to push URL to history (optional, default: 'true')
|
|
- size: Size variant 'sm', 'md', 'lg' (optional, default: 'md')
|
|
- show_info: Show "Showing X to Y of Z" info (optional, default: True)
|
|
- base_url: Base URL for pagination (optional, default: request.path)
|
|
|
|
Dependencies:
|
|
- Tailwind CSS for styling
|
|
- HTMX (optional, for dynamic pagination)
|
|
|
|
Accessibility:
|
|
- Uses nav element with aria-label="Pagination"
|
|
- Current page marked with aria-current="page"
|
|
- Previous/Next buttons have aria-labels
|
|
- Disabled buttons use aria-disabled
|
|
{% endcomment %}
|
|
|
|
{% if page_obj.has_other_pages %}
|
|
{% with use_htmx=use_htmx|default:False hx_target=hx_target|default:'#results' hx_swap=hx_swap|default:'innerHTML' size=size|default:'md' show_info=show_info|default:True %}
|
|
|
|
{# Size-based classes #}
|
|
{% if size == 'sm' %}
|
|
{% with btn_padding='px-2 py-1 text-xs' info_class='text-xs' %}
|
|
{% include 'components/pagination_inner.html' %}
|
|
{% endwith %}
|
|
{% elif size == 'lg' %}
|
|
{% with btn_padding='px-5 py-3 text-base' info_class='text-base' %}
|
|
{% include 'components/pagination_inner.html' %}
|
|
{% endwith %}
|
|
{% else %}
|
|
{% with btn_padding='px-4 py-2 text-sm' info_class='text-sm' %}
|
|
{% include 'components/pagination_inner.html' %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
|
|
{% endwith %}
|
|
{% endif %}
|