Skip to content

Instantly share code, notes, and snippets.

@cameronblandford
Last active August 30, 2019 18:03
Show Gist options
  • Save cameronblandford/266a89b3448e3c0074f25d21aada7ad2 to your computer and use it in GitHub Desktop.
Save cameronblandford/266a89b3448e3c0074f25d21aada7ad2 to your computer and use it in GitHub Desktop.
Pagination Behavior

Spec for Pagination Behavior

Pagination will look like the following for a 24-page results set.

< 1 2 3 4 5 6 ... 24 >

< 1 2 3 4 5 6 ... 24 >

< 1 2 3 4 5 6 ... 24 >

< 1 2 3 4 5 6 ... 24 >

< 1 ... 3 4 5 6 7 ... 24 >

< 1 ... 17 18 19 20 21 ... 24 >

< 1 ... 19 20 21 22 23 24 >

< 1 ... 19 20 21 22 23 24 >

< 1 ... 19 20 21 22 23 24 >

< 1 ... 19 20 21 22 23 24 >

For seven or fewer pages it will show all the pages.

The reason I'd push for 5 pages in the middle is because the pages on either side of current page are useless, you may as well just use the left and right chevrons. So the other user-friendly option is making the pagination look like:

< 1 ... 19 ... 24 >

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment