DSO Toolkit | Component Library

Pagination 

<!-- 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>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>1</span>
        </li>
    </ul>
</nav>


<!-- 2 1 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">
        <li class="active">
            <span>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>2</span>
        </li>
    </ul>
</nav>


<!-- 3 1 -->
<nav aria-label="Pagina navigatie">
    <ul class="pagination">
        <li class="active">
            <span>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>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>3</span>
        </li>
    </ul>
</nav>


<nav aria-label="Pagina navigatie">
  <ul class="pagination">
    {{#if (ne current 1) }}
      <li>
        <a href="#" aria-label="Vorige">
          <span class="dso-previous" aria-hidden="true"></span>
        </a>
      </li>
      <li>
        <a href="#">1</a>
      </li>
    {{/if}}
    {{#if (and (or (ne current count) (gte count 4)) (and (eq current count) (ne current 1)))}}
      <li>
        <a href="#">{{subtract current 2 }}</a>
      </li>
    {{/if}}
    {{#if (and (gte current 3) (or (and (gte current 3) (lte count 5)) (and (gt count 5) (ne current (subtract count 2 )) ) )) }}
      <li>
        <a href="#">{{subtract current 1 }}</a>
      </li>
    {{/if}}
    <li class="active">
      <span>{{ current }}</span>
    </li>
    {{#if (and (lte current (subtract count 2 )) (or (and (lte current 3) (lte count 5)) (and (ne current 3) (gt count 5)) ) ) }}
      <li>
        <a href="#">{{add current 1 }}</a>
      </li>
    {{/if}}
    {{#if (and (eq current 1) (gt count (add current 2))) }}
      <li>
        <a href="#">{{add current 2 }}</a>
      </li>
    {{/if}}
    {{#if (ne current count)}}
      <li>
        <a href="#">{{ count }}</a>
      </li>
      <li>
        <a href="#" aria-label="Volgende">
          <span class="dso-next" aria-hidden="true"></span>
        </a>
      </li>
    {{/if}}
  </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
  • 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