Anatomy of Basic Pagination Components

The above figure is the example of a basic pagination components, which
– Current page is page 15
– Total pages is 64 pages
– Has 2 edge items (page 1, 2 and page 63, 64)
– Has 3 mid items (page 12, 13, 14 and page 16, 17, 18)

Template System

To render the dynamic value within a pagination, we use “tags” for the template system. It’s like variables that will be rendered into their appropriate value.

Some tags in Responsive Pagination :

  • {pagenum} : The corresponding page number
  • {total} : Total pages
  • {current} : Current page number
  • {next} : Next page number
  • {prev} : Previous page number
  • {first} : First page number, effectively equals to 1
  • {last} : Last page number, equals to {total}

So, if we took example from above figure :
"Page {current} of {total}" will be rendered into “Page 15 of 64”

Then you can create pagination like this


We use breakpoints to define how pagination would shown in each range of browser width (viewport). As smaller screens cannot accomodate the lengthy pagination within one line, it is reasonable that the pagination items should be shown differently in each breakpoint.

For instance, on larger screens, the pagination items is fully shown in lengthy manners with all components enabled. On the other hand, on smaller screens, only current page and prev/next link with arrow is enabled.

The breakpoints definition is completely up to you, as well as what to show in each of them and the corresponding content (text).

For example, if we have 4 breakpoints of 320px, 480px, 720px, and 1024px. Thus the breakpoint configuration will be broken down into :
– 320px and up : Applied for 320px – 479px viewport
– 480px and up : Applied for 480px – 719px viewport
– 720px and up : Applied for 720px – 1023px viewport
– 1024px and up : Applied for 1024px and larger viewport