alar.ink/pagination.html

{% if total_pages > 1 %}
<menu class="buttons">
    <li><a {% if page > 1 %}href="{{ pg_url }}?page={{ page - 1 }}&per_page={{ per_page }}"{% endif %} class="button outline small"{% if page <= 1 %} aria-disabled="true"{% endif %}>&larr; {{ t(key="pagination.previous") }}</a></li>

    {% set window = 10 %}
    {% set half = 5 %}
    {% set_global start = page - half %}
    {% set_global end = start + window - 1 %}
    {% if start < 1 %}
        {% set_global start = 1 %}
        {% set_global end = window %}
    {% endif %}
    {% if end > total_pages %}
        {% set_global end = total_pages %}
        {% set_global start = total_pages - window + 1 %}
        {% if start < 1 %}{% set_global start = 1 %}{% endif %}
    {% endif %}

    {% if start > 1 %}
        <li><a href="{{ pg_url }}?page=1&per_page={{ per_page }}" class="button outline small">1</a></li>
        {% if start > 2 %}<li><span class="ellipsis">...</span></li>{% endif %}
    {% endif %}

    {% for p in range(start=start, end=end + 1) %}
        {% if p == page %}
            <li><a class="button small" aria-current="page">{{ p }}</a></li>
        {% else %}
            <li><a href="{{ pg_url }}?page={{ p }}&per_page={{ per_page }}" class="button outline small">{{ p }}</a></li>
        {% endif %}
    {% endfor %}

    {% if end < total_pages %}
        {% if end < total_pages - 1 %}<li><span class="ellipsis">...</span></li>{% endif %}
        <li><a href="{{ pg_url }}?page={{ total_pages }}&per_page={{ per_page }}" class="button outline small">{{ total_pages }}</a></li>
    {% endif %}

    <li><a {% if page < total_pages %}href="{{ pg_url }}?page={{ page + 1 }}&per_page={{ per_page }}"{% endif %} class="button outline small"{% if page >= total_pages %} aria-disabled="true"{% endif %}>{{ t(key="pagination.next") }} &rarr;</a></li>
</menu>
{% endif %}