Pagination test

nav class pagination

table + nav class pagination

User Data
Lorem Lorem ipsum dolor sit amet
Lorem Lorem ipsum dolor sit amet
Lorem Lorem ipsum dolor sit amet

Usage

An ordered list should be populated correctly when used as pagination. Expected are the following list items (all rendered as a link, except for the active page):

  1. First page
  2. Previous page
  3. p previous pages
  4. Active page
  5. n next pages
  6. Next page
  7. Last page

Where p is the number of previous pages, and n the number of next pages.

The aim is to show and move a window of 10 (9 absolute links, 1 active list item) pages. Favour p over n when an odd number of pages needs to be evenly distributed.

Use a nav element as a container with class pagination.

Example

Active page is 7, page count is 20.

  1. First (link to page 1)
  2. Previous (link to page 6)
  3. 2 (link to page 2)
  4. 3 (link to page 3)
  5. 4 (link to page 4)
  6. 5 (link to page 5)
  7. 6 (link to page 6)
  8. 7 (no link, class active on list item)
  9. 8 (link to page 8)
  10. 9 (link to page 9)
  11. 10 (link to page 10)
  12. 11 (link to page 11)
  13. Next (link to page 8)
  14. Last (link to page 20)

All the links should have a title attribute that tells the absolute page number, e.g. "Go to page 1".

Theming

Customising the pagination module's style is easy. Here is some example code that would be placed in the main theme file.

/* pagination */
nav.pagination {
  font-size: .75rem;
  font-weight: bold;
  padding: 2rem;
  background-color: #f2f2f2;
}
nav.pagination > ol > li:not(:last-child) {
  margin-right: .25rem;
}
nav.pagination > ol > li > a,
nav.pagination > ol > li.active {
  text-shadow: 0 1px 0 #fff;
  padding: .25rem .75rem;
  border-radius: .1875rem;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255, .8), 0 1px .1875rem rgb(0, 0, 0, .1);
}
nav.pagination > ol > li > a {
  color: #717171;
  text-decoration: none;
  border: 1px solid #c0c0c0;
  background: #e9e9e9 linear-gradient(#f8f8f8, #e9e9e9);
}
nav.pagination > ol > li > a:hover {
  background: #fefefe linear-gradient(#fefefe, #f0f0f0);
}
nav.pagination > ol > li.active {
  color: #f0f0f0;
  text-shadow: 0 0 .1875rem rgb(0, 0, 0, .5);
  background-color: #616161;
  box-shadow: inset 0 0 .5rem rgb(0, 0, 0, .5), 0 1px 0 rgb(255, 255, 255, .8);
}
Preview

Example night theme

This code extends the previous example code. It serves as a subtheme example. A subtheme could be used as another style layer on top of the main theme style which is used in special occasions.

/* pagination night */
nav.pagination {
  background-color: #414449;
}
nav.pagination > ol > li > a,
nav.pagination > ol > li.active {
  color: #feffff;
  text-shadow: 0 1px 0 rgb(0, 0, 0, .5);
  box-shadow: inset 0 1px 1px rgb(255, 255, 255, .1), 0 1px .1875rem rgb(0, 0, 0, .1);
}
nav.pagination > ol > li > a {
  border: solid 1px #32373b;
  background: #3e4347 linear-gradient(#565b5f, #3e4347);
}
nav.pagination > ol > li > a:hover {
  background: #3d4f5d linear-gradient(#547085, #3d4f5d);
}
nav.pagination > ol > li.active {
  background-color: #2f3237;
  box-shadow: inset 0 0 .5rem rgb(0, 0, 0, .5), 0 1px 0 rgb(255, 255, 255, .1);
}
Preview