Pagination

Important notice: The pagination component will not remove pages from the index if it overflows. Please trtuncate your array before sending it into list parameter.

Pagination

<!-- pagination.blade.php -->
<nav id="62becfe85a844" class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="62becfe85a83f">
    <ul class="c-pagination__list">
        
        <li class="c-pagination__item--previous c-pagination__item">
            <button id="62becfe85a93f" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85a939">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85a994" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85a98f">
                    chevron_left
            </i>
            </span>
        
        
    </span>
</button>        </li>

        
        <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links>
                                    <li class="c-pagination__item" js-pagination-index="1">
                        <a id="62becfe85a9fa" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/organisms/pagination?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85a9f5">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                1
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="2">
                        <a id="62becfe85aa56" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=2" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aa52">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                2
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="3">
                        <a id="62becfe85aaaa" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=3" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aaa6">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                3
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="4">
                        <a id="62becfe85aafd" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=4" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aaf9">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                4
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="5">
                        <a id="62becfe85ab5d" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=5" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85ab59">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                5
            </span>
        
    </span>
</a>                    </li>
                            </ul>
        </li>

        <li class="c-pagination__item u-display--none@xs">  
    <!-- icon.blade.php -->
    <i id="62becfe85afb3" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85afae">
                    more_horiz
            </i>
</li>

<li class="c-pagination__item u-display--none@xs">
    <a id="62becfe85b025" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=15" target="_top" aria-label="Page 15" type="button" data-uid="62becfe85b020">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                15
            </span>
        
    </span>
</a></li>
        <li class="c-pagination__item--next c-pagination__item">
            <a id="62becfe85b084" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="62becfe85b080">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85b0d1" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b0cd">
                    chevron_right
            </i>
            </span>
        
        
    </span>
</a>        </li>

    </ul>
</nav>
@pagination([
    'list' => [
        ['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
        ['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
        ['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
        ['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
        ['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
        ['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
        ['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
        ['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
        ['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
        ['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
        ['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
    ],
    'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpagination

Pagination outlined

<!-- pagination.blade.php -->
<nav id="62becfe85b4ac" class="c-pagination c-pagination--outlined" role="navigation" aria-label="Pagination Navigation" data-uid="62becfe85b4a7">
    <ul class="c-pagination__list">
        
        <li class="c-pagination__item--previous c-pagination__item">
            <button id="62becfe85b59b" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85b595">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85b5ef" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b5ea">
                    chevron_left
            </i>
            </span>
        
        
    </span>
</button>        </li>

        
        <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links>
                                    <li class="c-pagination__item" js-pagination-index="1">
                        <a id="62becfe85b650" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/organisms/pagination?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b64b">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                1
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="2">
                        <a id="62becfe85b6a1" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=2" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b69e">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                2
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="3">
                        <a id="62becfe85b6de" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=3" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b6db">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                3
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="4">
                        <a id="62becfe85b716" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=4" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b713">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                4
            </span>
        
    </span>
</a>                    </li>
                                    <li class="c-pagination__item" js-pagination-index="5">
                        <a id="62becfe85b74e" class="c-button c-pagination__link  c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=5" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b74b">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                5
            </span>
        
    </span>
</a>                    </li>
                            </ul>
        </li>

        <li class="c-pagination__item u-display--none@xs">  
    <!-- icon.blade.php -->
    <i id="62becfe85b7c9" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b7c5">
                    more_horiz
            </i>
</li>

<li class="c-pagination__item u-display--none@xs">
    <a id="62becfe85b803" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=15" target="_top" aria-label="Page 15" type="button" data-uid="62becfe85b800">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                15
            </span>
        
    </span>
</a></li>
        <li class="c-pagination__item--next c-pagination__item">
            <a id="62becfe85b83e" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="62becfe85b83b">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85b884" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b880">
                    chevron_right
            </i>
            </span>
        
        
    </span>
</a>        </li>

    </ul>
</nav>
@pagination([
    'list' => [
        ['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
        ['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
        ['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
        ['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
        ['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
        ['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
        ['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
        ['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
        ['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
        ['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
        ['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
    ],
    'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1,
    'classList' => [
        "c-pagination--outlined"
        ]
])
@endpagination

Using JS

Easier pagination

With just a few added attributes you can have pagnation made for you

Simple pagination

Item 1
Item 2
Item 3
<!-- card.blade.php -->
<div href="" id="62becfe85c196" class="c-card c-card--default c-card--ratio-4-3" js-pagination-target="" data-uid="62becfe85c192">
    
    <div class="c-card__header">
        <!-- typography.blade.php  -->
<h4 id="62becfe85bb7e" class="c-typography c-typography__variant--p" data-uid="62becfe85bb7b">
    Simple pagination
</h4>    </div>


    <!-- collection.blade.php -->
<div id="62becfe85be98" class="c-collection" js-pagination-container="" data-uid="62becfe85be95">
    
    
            <!-- collection__item.blade.php -->
<div id="62becfe85bc92" class="c-collection__item" js-pagination-item="" data-uid="62becfe85bc8e">
    
    
            <div class="c-collection__content">
            Item 1
        </div>
    
    
    </div>
        <!-- collection__item.blade.php -->
<div id="62becfe85bdfe" class="c-collection__item" js-pagination-item="" data-uid="62becfe85bdfa">
    
    
            <div class="c-collection__content">
            Item 2
        </div>
    
    
    </div>
        <!-- collection__item.blade.php -->
<div id="62becfe85be37" class="c-collection__item" js-pagination-item="" data-uid="62becfe85be34">
    
    
            <div class="c-collection__content">
            Item 3
        </div>
    
    
    </div>
    </div>
    <!-- pagination.blade.php -->
<nav id="62becfe85bf80" class="c-pagination" role="navigation" aria-label="Pagination Navigation" js-pagination="" js-pagination-per-page="2" js-pagination-max-pages="" data-uid="62becfe85bf7b">
    <ul class="c-pagination__list">
        
        <li class="c-pagination__item--previous c-pagination__item">
            <button id="62becfe85c025" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85c021">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85c05e" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85c05b">
                    chevron_left
            </i>
            </span>
        
        
    </span>
</button>        </li>

        
        <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links>
                                    <li class="c-pagination__item" js-pagination-index="1">
                        <a id="62becfe85c0a6" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85c0a3">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                1
            </span>
        
    </span>
</a>                    </li>
                            </ul>
        </li>

        
        <li class="c-pagination__item--next c-pagination__item">
            <button id="62becfe85c0e6" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-next="" type="button" aria-pressed="false" data-uid="62becfe85c0e3">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becfe85c119" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85c116">
                    chevron_right
            </i>
            </span>
        
        
    </span>
</button>        </li>

    </ul>
</nav>
</div>
@card([
    'attributeList' => [
        'js-pagination-target' => ''
    ]
])
    <div class="c-card__header">
        @typography([
            'element' => "h4"
        ])
            Simple pagination
        @endtypography
    </div>


    @collection(['attributeList' => ['js-pagination-container' => '']])
        @collection__item(['attributeList' => ['js-pagination-item' => '']])
            Item 1
        @endcollection__item

        @collection__item(['attributeList' => ['js-pagination-item' => '']])
            Item 2
        @endcollection__item

        @collection__item(['attributeList' => ['js-pagination-item' => '']])
            Item 3
        @endcollection__item
    @endcollection

    @pagination([
        'list' => [
            ['href' => '?pagination=1', 'label' => 'Page 1'],
        ],
        'current' => 1,
        'useJS' => true,
        'perPage' => 2,
    ])
    @endpagination
@endcard

Blade component parameters

Key Default value Type Available values Description
list [] array - Array with pages
current 1 integer - current page as index number
currentClass --is-active string - The current classname
componentElement nav string - The tag for the component
listElement ul string - List element tag
listItem li string - List item tag
linkPrefix ?pagination= string - Pagination uses a link prefix on prev next buttons before the numeric index, add it here.
anchorTag string - Adds the ability to add an anchor tag in the end of every link.
previousDisabled false string - -
nextDisabled false string - -
useJS false boolean - If the item should use default JS to supply pagination
perPage 10 integer - How many items per page
maxPages false boolean - Maximum amount of pages
buttonStyle filled string - The style of button to display
buttonSize sm string - Size of the buttons
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Pagination/pagination.json