46 lines
2.2 KiB
HTML
46 lines
2.2 KiB
HTML
{% macro render_pagination(pagination, endpoint) %}
|
|
{% if pagination.total %}
|
|
<nav class="flex flex-col gap-3 border-t border-line px-5 py-4 sm:flex-row sm:items-center sm:justify-between" aria-label="分页">
|
|
<div class="text-sm text-textSub">
|
|
共 <span class="font-bold text-textMain">{{ pagination.total }}</span> 条记录，
|
|
第 <span class="font-bold text-textMain">{{ pagination.page }}</span> / {{ pagination.pages }} 页
|
|
</div>
|
|
{% if pagination.pages > 1 %}
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
{% set prev_page = pagination.prev_num if pagination.has_prev else pagination.page %}
|
|
<a
|
|
class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not pagination.has_prev }}"
|
|
href="{{ url_for(endpoint, page=prev_page) }}"
|
|
aria-disabled="{{ 'false' if pagination.has_prev else 'true' }}"
|
|
>
|
|
<span class="material-symbols-outlined text-lg">chevron_left</span>
|
|
上一页
|
|
</a>
|
|
<div class="flex items-center gap-1">
|
|
{% for page in pagination.iter_pages(left_edge=1, left_current=1, right_current=2, right_edge=1) %}
|
|
{% if page %}
|
|
<a
|
|
class="inline-flex h-10 min-w-10 items-center justify-center rounded-md border px-3 text-sm font-bold {{ 'border-primary bg-primary text-white' if page == pagination.page else 'border-line bg-white text-slate-600 hover:border-primary hover:text-primary' }}"
|
|
href="{{ url_for(endpoint, page=page) }}"
|
|
aria-current="{{ 'page' if page == pagination.page else 'false' }}"
|
|
>{{ page }}</a>
|
|
{% else %}
|
|
<span class="inline-flex h-10 min-w-10 items-center justify-center text-sm font-bold text-textSub">...</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% set next_page = pagination.next_num if pagination.has_next else pagination.page %}
|
|
<a
|
|
class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not pagination.has_next }}"
|
|
href="{{ url_for(endpoint, page=next_page) }}"
|
|
aria-disabled="{{ 'false' if pagination.has_next else 'true' }}"
|
|
>
|
|
下一页
|
|
<span class="material-symbols-outlined text-lg">chevron_right</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</nav>
|
|
{% endif %}
|
|
{% endmacro %}
|