Pagination

From Web Developer Network Wiki
Jump to: navigation, search

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:

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>

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.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox