Pagination Design Pattern

Example

The CSS

  1. /*PATTERNS*/
  2. #pagination {width:80%; margin:0 auto; }
  3. #pagination p, #pagination ul {text-align: center;}
  4. #pagination-pages li {display: inline; }
  5. #pagination-pages a {border: 1px solid #999; padding: 2px 8px; text-decoration: none; background-color: #a2c1e3; color:#fff; }
  6. #pagination-pages a.noURL {background-color:transparent; color:#a2c1e3; cursor: pointer;}

The HTML

  1. <div id="pagination">
  2.      <p>We found: 410 records. Viewing records: 201 through 250</p>
  3.      <ul id="pagination-pages">
  4.           <li><a href="?currentPage=4" class="previous" title="previous" id="pagination-previous">‹ Prev</a></li><li><a href="?currentPage=1">1</a></li>
  5.           <li><a href="?currentPage=2">2</a></li>
  6.           <li><a href="?currentPage=3">3</a></li>
  7.           <li><a href="?currentPage=4">4</a></li>
  8.           <li><a class="noURL" href="#">5</a></li>
  9.           <li><a href="?currentPage=6">6</a></li>
  10.           <li><a href="?currentPage=7">7</a></li>
  11.           <li><a href="?currentPage=8">8</a></li>
  12.           <li><a href="?currentPage=9">9</a></li>
  13.           <li><a href="?currentPage=6" class="next" title="Next" id="pagination-next">Next ›</a></li>
  14.      </ul>
  15. </div>