Skip Navigation

Web Developer Network Wiki

Pagination

Pagination is a UI style to be used for web applications that require navigating through lists of pages. Pagination is used when the resulting dataset is too large for a single page.

Example:

Image:Pagination.png

Code: 

<script type="text/javascript">
WDN.loadCSS('/wdn/templates_3.0/css/content/pagination.css');
</script>
<ul class="wdn_pagination">
	<li class="arrow"><a href="#" title="Go to the previous page">← prev</a></li>
	<li><a href="#" title="Go to page 1">1</a></li>
	<li class="selected">2</li>
	<li><a href="#" title="Go to page 3">3</a></li>
	<li><a href="#" title="Go to page 4">4</a></li>
	<li><a href="#" title="Go to page 5">5</a></li>
	<li><a href="#" title="Go to page 6">6</a></li>
	<li class="ellipsis">...</li>
	<li><a href="#" title="Go to page 17">17</a></li>
	<li><a href="#" title="Go to page 18">18</a></li>
	<li><a href="#" title="Go to page 19">19</a></li>
	<li class="arrow"><a href="#" title="Go to the next page">next →</a></li>
</ul>

[edit] Important Notes

When using the pagination, don't show the 'Previous' link on the first page and don't show the 'Next' link on the last page.

Retrieved from "http://www1.unl.edu/wdn/wiki/Pagination"