rpiwebapp-public/templates/pagination.html

{% with page_count=(item_count/max_items)|round(method="ceil")|int %}
{% if page_count > 1 %}
<nav aria-label="Page navigation example" style="display: inline-block; margin: 5px">
    <form method="get" action="">
        {% for key in request.args.keys() %}
            {% if key != "page" %}<input type="hidden" name="{{ key }}" value="{{ request.args.get(key) }}">{% endif %}
        {% endfor %}
        {% with %}

            {% set min = 1+page-6 %}
            {% set max = page+6 %}
            {% set prev = page-1 %}
            {% set next = page+1 %}

            {% if min <= 1 %}{% set min = 2 %}{% endif %}
            {% if max >= page_count %}{% set max = page_count %}{% endif %}

            <ul class="pagination">
            {% if prev > 0 %}
            <li class="page-item">
                <button name="page" value="{{ prev }}" class="page-link"><img src="/static/svg/chevron-left.svg"></button>
            </li>
            {% endif %}
            <li class="page-item{% if page == 1 %} active{% endif %}">
                <button name="page" value="1" class="page-link">1</button>
            </li>
            {% if min >2 %}...{% endif %}
            {% for i in range(min, max) %}
                <li class="page-item{% if page == i %} active{% endif %}">
                    <button name="page" value="{{ i }}" class="page-link">{{ i }}</button>
                </li>
            {% endfor %}
            {% if max < page_count %}...{% endif %}

            <li class="page-item{% if page == page_count %} active{% endif %}">
                <button name="page" value="{{ page_count }}" class="page-link">{{ page_count }}</button>
            </li>
            {% if next < page_count+1 %}
            <li class="page-item">
                <button name="page" value="{{ next }}" class="page-link"><img src="/static/svg/chevron-right.svg"></button>
            </li>
            {% endif %}
        {% endwith %}
        </ul>
    </form>
</nav>
{% endif %}
{% endwith %}