Pagination

  • 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>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>
      
/* 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