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
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