Skip to main content

Pagination

Provide a control for users to navigate through 'pages' of content and to get a sense of how many records may be available.

This component can be used where developers have implemented their own pagination controllers, if you're using datatables, this component will be used to paginate the table if there are an appropriate number of rows.

note

Pagination should not be displayed at all if there aren't enough records to require the table to be paginated.

Accessibility​

Refer to the Jadu Accessibility Guidelines (internal) for detailed guidance on the accessibility requirements of this component.

First page selected​

The previous, next, first and last links should only be shown when a previous or next page exist. For example, the previous and first link should not be shown when the user is on the first page. Similarly, the next and last link should not be shown when the user is on the last page.

<nav aria-label="Table pagination" className="pagination">
  <ul className="pull-left">
    <li className="selected"><a href="#1" aria-current="true" aria-label="Current page, page 1">1</a></li>
    <li><a href="#" aria-label="page 2">2</a></li>
    <li><a href="#" aria-label="page 3">3</a></li>
    <li><a href="#" aria-label="page 4">4</a></li>
    <li><a href="#" aria-label="page 5">5</a></li>
    <li><a href="#" aria-label="next page">Next</a></li>
    <li><a href="#" aria-label="last page">Last</a></li>
  </ul>
</nav>

Middle page selected​

Note the first, previous, next and last links are visible.

<nav aria-label="Table pagination" className="pagination">
  <ul className="pull-left">
    <li><a href="#" aria-label="first page">First</a></li>
    <li><a href="#" aria-label="previous page">Previous</a></li>
    <li><a href="#" aria-label="page 1">1</a></li>
    <li className="selected"><a href="#" aria-current="true" aria-label="Current page, page 2">2</a></li>
    <li><a href="#" aria-label="page 3">3</a></li>
    <li><a href="#" aria-label="page 4">4</a></li>
    <li><a href="#" aria-label="page 5">5</a></li>
    <li><a href="#" aria-label="next page">Next</a></li>
    <li><a href="#" aria-label="last page">Last</a></li>
  </ul>
</nav>

Last page selected​

The next and last link should not be shown when the user is on the last page.

<nav aria-label="Table pagination" className="pagination">
  <ul className="pull-left">
    <li><a href="#" aria-label="first page">First</a></li>
    <li><a href="#" aria-label="previous page">Previous</a></li>
    <li><a href="#" aria-label="page 1">1</a></li>
    <li><a href="#" aria-label="page 2">2</a></li>
    <li><a href="#" aria-label="page 3">3</a></li>
    <li><a href="#" aria-label="page 4">4</a></li>
    <li className="selected"><a href="#" aria-current="true" aria-label="Current page, page 5">5</a></li>
  </ul>
</nav>