Version 3.0.6

Pagination

Allow users to easily navigate through multiple pages of content by providing pagination links.

The pagination pattern is hard to miss, easily scalable, and provides large click areas. There are quick links to jump to the first and last page, as well as the previous and next pages. You should always indicate to the user how many total results are available.

  1. First
  2. Prev
    1. 1
    2. 2
    3. ...
    4. 11
    5. 12
  3. Next
  4. Last
Displaying X-Y of Z Results
                      
<div class="pagination-container">
<ol class="pagination">
<li class="pagination-first disabled">
<a href="#">
<span class="glyphicons glyphicons-chevron-left" aria-hidden="true"></span>
<span class="glyphicons glyphicons-chevron-left" aria-hidden="true"></span>
<span class="reader-only">First</span>
</a>
</li>
<li class="pagination-prev disabled">
<a href="#">
<span class="glyphicons glyphicons-chevron-left" aria-hidden="true"></span>
<span class="reader-only">Previous</span>
</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">11</a>
</li>
<li>
<a href="#">12</a>
</li>
<li class="pagination-next">
<a href="#">
<span class="glyphicons glyphicons-chevron-right" aria-hidden="true"></span>
<span class="reader-only">Next</span>
</a>
</li>
<li class="pagination-last">
<a href="#">
<span class="glyphicons glyphicons-chevron-right" aria-hidden="true"></span>
<span class="glyphicons glyphicons-chevron-right" aria-hidden="true"></span>
<span class="reader-only">Last</span>
</a>
</li>
</ol>
<div class="pagination-stats">Displaying X-Y of Z Results</div>
</div>
    Displaying {{firstDisplayed()}}-{{lastDisplayed()}} of {{totalItems}} Results
                          
    <div class="pagination-container">
    <uib-pagination class boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
    <div class="pagination-stats">Displaying {{firstDisplayed()}}-{{lastDisplayed()}} of {{totalItems}}</div>
    </div>

    Search Results

    Powered by