Skip to content

Instantly share code, notes, and snippets.

@lancejpollard
Created June 26, 2011 18:11
Show Gist options
  • Save lancejpollard/1047815 to your computer and use it in GitHub Desktop.
Save lancejpollard/1047815 to your computer and use it in GitHub Desktop.
Semantic Pagination HTML5
<nav class='paginator' role='toolbar'>
<ul class='goto-pages'>
<li class='goto-search'>
<a href="#search" class="search-pages" title="Toggle Advanced Search">&#8981;</a>
</li>
<li class='goto-page'>
<a href="/admin/users?page=1" aria-disabled="true" class="first-page disabled" data-page="1" rel="first" title="Go to the first page">&#8676;</a>
</li>
<li class='goto-page'>
<a href="/admin/users?page=1" aria-disabled="true" class="prev-page disabled" data-page="1" rel="prev" title="Go to page 1">&#8672;</a>
</li>
<li aria-valuemax='109' aria-valuemin='1' aria-valuetext='1' class='goto-page current-page' role='spinbutton'>
<span>Page</span>
<input class='current-page-input' value='1'>
<span>of</span>
<span class='page-count'>109</span>
</li>
<li class='goto-page'>
<a href="/admin/users?page=2" aria-disabled="false" class="next-page yes" data-page="2" rel="next" title="Go to page 2">&#8674;</a>
</li>
<li class='goto-page'>
<a href="/admin/users?page=109" aria-disabled="false" class="last-page yes" data-page="109" rel="last" title="Go to the last page">&#8677;</a>
</li>
</ul>
<output class='record-count'>
<span>Viewing</span>
<span class='current-record-range'>1 - 20</span>
<span>of</span>
<span class='total-record-count'>2178</span>
</output>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment