DIA Frontend

Pagination 

<nav aria-label="Page navigation example">

        <ul class="pagination justify-content-center">

            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>

            <li class="page-item active">
                <a class="page-link" href="#">
                    1 <span class="sr-only">(current)</span>
                </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#">
                    2 </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#">
                    3 </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#">
                    4 </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#">
                    5 </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>
 
{% block main %}
    <nav aria-label="{{ label }}">
        {% spaceless %}
            {% set classes = ['pagination'] %}
            {% if size == 'lg' %}
                {% set classes = classes|merge(['pagination-lg']) %}
            {% endif %}
            {% if size == 'sm' %}
                {% set classes = classes|merge(['pagination-sm']) %}
            {% endif %}
            {% if alignment == 'center' %}
                {% set classes = classes|merge(['justify-content-center']) %}
            {% endif %}
            {% if alignment == 'right' %}
                {% set classes = classes|merge(['justify-content-end']) %}
            {% endif %}
        {% endspaceless %}

        <ul class="{{ classes|join(' ') }}">
            {% if prev %}
                {% if prevDisabled %}
                    {% set classPrev = ' disabled' %}
                {% endif %}

                <li class="page-item{{ classPrev }}">
                    {% if icons %}
                        <a class="page-link" href="#" aria-label="{{ prev }}">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">{{ prev }}</span>
                        </a>
                    {% else %}
                        <a class="page-link" href="#" tabindex="-1">
                            {{ prev }}
                        </a>
                    {% endif %}
                </li>
            {% endif %}
            {% for i in 1..pages %}
                {% if loop.index == active %}
                    {% set classItem = ' active' %}
                {% endif %}

                <li class="page-item{{ classItem }}">
                    <a class="page-link" href="#">
                        {{ loop.index }}{% if loop.index == active %}
                            <span class="sr-only">(current)</span>
                        {% endif %}
                    </a>
                </li>
            {% endfor %}
            {% if next %}
                {% if nextDisabled %}
                    {% set classNext = ' disabled' %}
                {% endif %}

                <li class="page-item{{ classNext }}">
                    {% if icons %}
                        <a class="page-link" href="#" aria-label="{{ next }}">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">{{ next }}</span>
                        </a>
                    {% else %}
                        <a class="page-link" href="#" tabindex="-1">
                            {{ next }}
                        </a>
                    {% endif %}
                </li>
            {% endif %}
        </ul>
    </nav>
{% endblock %}
 
{
  "label": "Page navigation example",
  "pages": 5,
  "active": 1,
  "icons": true,
  "prev": "Previous",
  "prevDisabled": true,
  "next": "Next",
  "nextDisabled": false,
  "size": null,
  "alignment": "center"
}

No notes defined.