Components

Pagination

Pagination is used to display to the user that there is more results/data to be shown. Typically used for search results, but can be used to show multiple sets of data results.

Example

                                
                                <div class="view-pagination">
<ul class="pagination">
<li class="disabled"><a href="#" data-page="0" aria-label="Previous page">&lt;</a></li>
<li class="active"><a href="#" data-page="1" aria-current="page">1</a></li>
<li><a href="#" aria-label="page 2" data-page="2">2</a></li>
<li><a href="#" aria-label="page 3" data-page="3">3</a></li>
<li><a href="#" data-page="2" aria-label="Next page">&gt;</a></li>
</ul>
</div>

Portal Code example

  • The portal will output form controls in a specific way out of the box
  • It uses bootstraps jquery-bootstrap-pagination library so can be easily used in bespoke way.
                        
                        <div class="view-pagination" data-current-page="1" data-pages="1" data-pagesize="" style="display: block;"><div class="jquery-bootstrap-pagination">
<ul class="pagination">
<li><a href="#" data-page="1" aria-label="Previous page">&lt;</a></li>
<li><a href="#" aria-label="page 1" data-page="1">1</a></li>
<li class="active"><a href="#" data-page="2" aria-current="page">2</a></li>
<li><a href="#" aria-label="page 3" data-page="3">3</a></li>
<li><a href="#" aria-label="page 4" data-page="4">4</a></li>
<li><a href="#" aria-label="page 5" data-page="5">5</a></li>
<li><a href="#" aria-label="page 6" data-page="6">6</a></li>
<li><a href="#" aria-label="page 7" data-page="7">7</a></li>
<li><a href="#" data-page="3" aria-label="Next page">&gt;</a></li>
</ul>
</div></div>
Back to top