Illinois web toolkit documentation

Version 2.7.3

Component

Pagination

Description

The Illinois theme component il-pagination provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last).

What it looks like

Example image (version 2.4, Dec. 8, 2021)

Try it out

(In the examples below, replace elements in bold with your own content.)

This tag should contain:

  • An ID name
  • Which page number you are currently on (in the example below, 3)
  • How many pages in total are in this collection (in the example below, 5)

<il-pagination id=”examplepage=”3pages=”5></il-pagination>

The URLs created by this pattern will resemble https://builder.toolkit.illinois.edu/prod/pagination/index.html?page=3.

Different URL structure with param

If you need to use a signifier other than “?page” in your pagination, you can control that with the param option.

In a scenario in which you were using this tool to count sections rather than pages, your tag might resemble:

<il-pagination id=”examplepage=”3pages=”5” param=”section></il-pagination>

And the URL generated will resemble: 

https://builder.toolkit.illinois.edu/prod/pagination/index.html?section=3

Syntax guide

In the examples below, change the elements marked in bold to match your own content.

il-pagination 

Syntax:  

<il-pagination id="example" page="3" pages="5" param="anotherword"></il-pagination> 
  • Required elements:
    • id=”list name”: The identifier of the pagination element itself
    • page=”#” : The numeric value of the currently selected page in the list
    • pages=”#”: The total number of pages that should be displayed in this list
  • Optional elements:
    • param=”anotherword”: If the URL generated by your paginator uses something other than the word “page”,  indicate the alternate word using param. (See the different URL structure under Sample Patterns.)

About this component

  • Type: CSS classes
  • Introduced in: v2.3.0; 9/29/2021
  • Deprecated?: No