Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Pagination 

<section aria-label="First example">
    <h1>Static example (html only)</h1>

    <nav aria-label="Pagina navigation (static)">
        <ul class="pagination">
            <li class="page-item page-item-previous disabled">
                <a class="page-link" href="" aria-disabled="true">
                    <span aria-hidden="true"><span class="mdi mdi-chevron-left" aria-hidden="true"></span></span>
                    <span class="sr-only">Vorige</span>
                </a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="">1 <span class="sr-only">(huidig)</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 page-item-next">
                <a class="page-link" href="">
                    <span aria-hidden="true"><span class="mdi mdi-chevron-right" aria-hidden="true"></span></span>
                    <span class="sr-only">Volgende</span>
                </a>
            </li>
        </ul>
    </nav>
</section>

<section aria-label="Second example">
    <h1>Dynamic example (with pagination script)</h1>

    <nav aria-label="Pagina navigation (dynamic)">
        <ul class="pagination" id="paginationExample">
            <li class="page-item page-item-previous">
                <a class="page-link" href="">
                    <span aria-hidden="true"><span class="mdi mdi-chevron-left" aria-hidden="true"></span></span>
                    <span class="sr-only">Vorige</span>
                </a>
            </li>
            <li class="page-item page-item-next">
                <a class="page-link" href="">
                    <span aria-hidden="true"><span class="mdi mdi-chevron-right" aria-hidden="true"></span></span>
                    <span class="sr-only">Volgende</span>
                </a>
            </li>
        </ul>
    </nav>
</section>

<script id="pagination-item-template" type="text/template">
    <li class="page-item">
        <a class="page-link" href=""></a>
    </li>
</script>

<script id="pagination-item-current-template" type="text/template">
    <span class="sr-only">(huidig)</span>
</script>

Pagination

Based on the version from MDB:
https://mdbootstrap.com/components/pagination/#disabled-active

Using only the html

No additional actions, aside from the markup, are needed to use this component.

Using with the pagination script

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the search results and the search result script itself. Both scripts need to be placed in the Additional component(s) script section as documented in How to use.

You need to instantiate the Pagination class with the following parameters:

  1. int - The total number of pages
  2. string - The url that is used as a link on each page number. The variable {page} is substituted with the actual page number.
  3. (optional) int - The number of pages to show in the list (default 9)

Then call the show method with the current page as a parameter to show the results.

Example on how to implement:

<script>
    var pagination = new nijmegen.Pagination(10, '#{page}', 5);

    $(document).ready(function () {
        pagination.init('#paginationExample');
        pagination.show(1);

        $(window).on('hashchange', function () {
            var page = parseInt(window.location.hash.slice(1));
            pagination.show(page);
        });
    });
</script>