Pagination

Overview

Pagination refers to the sequence of numbering as part of our search result set. 

Paging of search results resides at the bottom of the result set.

All paging 'buttons' are links using HTTP GET so that results can be bookmarked or shared via email/social media.

Paging buttons have titles explaining which page they go to, as shown in the markup samples.

Example

Markup:

 

Active buttons:

Before and previous buttons:

WCMS use

On page 1

The first 10 pages are shown, along with a next button after page 10.

On pages 2 and up

Add first and previous buttons at the start of the paging set.

From page 6, 5 pages either side of the current active page are shown.

On last page

Do not show the next button.

MVC.net use
Code

Mark up:
<p class="paginate">
	<a href="" title="On page 1" class="paginate_active">1</a>
	<a href="" title="Go to page 2" class="paginate_button">2</a>
	<a href="" title="Go to page 3" class="paginate_button">3</a>
	<a href="" title="Go to page 4" class="paginate_button">4</a>
	<a href="" title="Go to page 5" class="paginate_button">5</a>
	<a href="" title="Go to page 6" class="paginate_button">6</a>
	<a href="" title="Go to page 7" class="paginate_button">7</a>
	<a href="" title="Go to page 8" class="paginate_button">8</a>
	<a href="" title="Go to page 9" class="paginate_button">9</a>
	<a href="" title="Go to page 10" class="paginate_button">10</a>
	<a title="Next" href="" class="paginate_button">
		<i class="icon angle-right"></i>
	</a>
</p>


Active page:
<a href="" title="On page 1" class="paginate_active">1</a>


First and Previous buttons:
<a class="paginate_button" title="First" href="">
	<i class="icon double-angle-left"></i>
</a>
<a class="paginate_button" title="Previous" href="">
	<i class="icon double-angle-left"></i>
</a>

Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release