Pagination

Component preview opent in nieuw tabblad
  • 100% Bootstrap compatible markup
  • Als het niet mogelijk is om vanaf de huidige pagina naar een vorige of volgende pagina te gaan, dan toont deze knop niet
<!-- Default -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li>
            <a href="#" aria-label="Vorige">
                <span class="dso-previous" aria-hidden="true"></span>
            </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>

        <li>
            <a href="#">2</a>
        </li>

        <li class="active">
            <span aria-current="page">3</span>
        </li>

        <li>
            <a href="#">4</a>
        </li>

        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
                <span class="dso-next" aria-hidden="true"></span>
            </a>
        </li>

    </ul>
</nav>
<!-- 1 1 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li class="active">
            <span aria-current="page">1</span>
        </li>

    </ul>
</nav>
<!-- 2 1 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li class="active">
            <span aria-current="page">1</span>
        </li>

        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
                <span class="dso-next" aria-hidden="true"></span>
            </a>
        </li>

    </ul>
</nav>
<!-- 2 2 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li>
            <a href="#" aria-label="Vorige">
                <span class="dso-previous" aria-hidden="true"></span>
            </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>

        <li class="active">
            <span aria-current="page">2</span>
        </li>

    </ul>
</nav>
<!-- 3 1 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li class="active">
            <span aria-current="page">1</span>
        </li>

        <li>
            <a href="#">2</a>
        </li>

        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
                <span class="dso-next" aria-hidden="true"></span>
            </a>
        </li>

    </ul>
</nav>
<!-- 3 2 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li>
            <a href="#" aria-label="Vorige">
                <span class="dso-previous" aria-hidden="true"></span>
            </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>

        <li class="active">
            <span aria-current="page">2</span>
        </li>

        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
                <span class="dso-next" aria-hidden="true"></span>
            </a>
        </li>

    </ul>
</nav>
<!-- 3 3 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">

        <li>
            <a href="#" aria-label="Vorige">
                <span class="dso-previous" aria-hidden="true"></span>
            </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>

        <li>
            <a href="#">2</a>
        </li>

        <li class="active">
            <span aria-current="page">3</span>
        </li>

    </ul>
</nav>
<nav aria-label="Pagina navigatie">
  <ul class="pagination">
    {% if current !== 1 %}
      <li>
        <a href="#" aria-label="Vorige">
          <span class="dso-previous" aria-hidden="true"></span>
        </a>
      </li>
      <li>
        <a href="#">1</a>
      </li>
    {% endif %}
    {% if (current !== count or count >= 4) and (current === count and current !== 1) %}
      <li>
        <a href="#">{{ current - 2 }}</a>
      </li>
    {% endif %}
    {% if current >= 3 and ((current >= 3 and count <= 5) or (count > 5 and current !== count - 2)) %}
      <li>
        <a href="#">{{ current - 1 }}</a>
      </li>
    {% endif %}
    <li class="active">
      <span aria-current="page">{{ current }}</span>
    </li>
    {% if current <= (count - 2) and ((current <= 3 and count <= 5) or (current !== 3 and count > 5)) %}
      <li>
        <a href="#">{{ current + 1 }}</a>
      </li>
    {% endif %}
    {% if current === 1 and count > (current + 2) %}
      <li>
        <a href="#">{{ current + 2 }}</a>
      </li>
    {% endif %}
    {% if current !== count %}
      <li>
        <a href="#">{{ count }}</a>
      </li>
      <li>
        <a href="#" aria-label="Volgende">
          <span class="dso-next" aria-hidden="true"></span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>
/* Default */
count: 5
current: 3
/* 1 1 */
count: 1
current: 1
/* 2 1 */
count: 2
current: 1
/* 2 2 */
count: 2
current: 2
/* 3 1 */
count: 3
current: 1
/* 3 2 */
count: 3
current: 2
/* 3 3 */
count: 3
current: 3