Pagination

📖 Theory

Thirty events, one endless scroll

FestConnect now lists 30 events. Showing all 30 on one page means a tired thumb scrolling forever, and no sense of 'where am I'. The usual fix is to show 10 per page with a little numbered bar at the bottom: Previous, 1, 2, 3, Next.

Bootstrap has a ready-made component for exactly that bar. It is just an unordered list with specific classes, so once you know the shape you can build it from memory.

📖 Theory

Tabs on a filing folder

A thick paper file is split into sections with numbered tabs sticking out the side. You do not read all sections at once; you flip to a tab. Pagination is those tabs for a web list: each number is a tab to a slice of the results, the current tab is highlighted, and a tab you cannot use right now (Previous, when you are already on page 1) is greyed out.

📖 Theory

The structure

Pagination is a list with three fixed class layers:

• `<ul class="pagination">`: the bar.
• `<li class="page-item">`: one page slot.
• `<a class="page-link">`: the clickable number inside it.

Two state classes go on the `page-item` (the <li>), not the link:

• `.active`: the current page (highlighted).
• `.disabled`: a link that cannot be used right now (greyed, not clickable).

🪜 Follow along

Build the FestConnect pager (page 2 of 3)

1. Open a <ul class="pagination"> this is the bar that holds every page slot
2. Add a disabled Previous on page 1 you would give it class="page-item disabled"; on page 2 it is active-able
3. Add a page-item per number <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
4. Mark the current page active the page 2 li gets class="page-item active"
5. Add a Next page-item same shape, its link points at ?page=3

⌨️ Practical

The pager markup

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="?page=1">Previous</a></li>
  <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
  <li class="page-item active"><a class="page-link" href="?page=2">2</a></li>
  <li class="page-item"><a class="page-link" href="?page=3">3</a></li>
  <li class="page-item"><a class="page-link" href="?page=3">Next</a></li>
</ul>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Where does .active go?

A student puts class="page-link active" on the <a> and the highlight looks wrong. On which element should .active (and .disabled) actually sit, and why does that matter?

🧩 Quiz

On page 1 of the FestConnect list, what should the 'Previous' link look like, and how do you achieve it?

1. Greyed and unclickable, by adding disabled to its page-item
2. Highlighted, by adding active to its page-item
3. Hidden, by deleting the whole pagination list
4. Blue and clickable, exactly like the number links

⚠️ Watch out

Pagination traps

1. State classes on the wrong element: active/disabled belong on the page-item <li>, not the page-link <a>.

2. Skipping the list structure: it must be ul > li.page-item > a.page-link. Bare <a> tags with page-link will not align into the bar.

3. Thinking pagination loads the data: it is only the visual bar. Actually fetching page 2's ten events is server-side or JavaScript work; the bar just links to ?page=2.

📖 Theory

The href carries the page number

Notice href="?page=2": that is the GET query string from the Unit 1 forms lesson. The server (or later, your JavaScript) reads page=2 and returns the right ten events. Pagination, GET parameters, and the grid you built earlier all click together into one browsable event list.

✅ Summary

Key takeaways

• Pagination is <ul class="pagination"> > <li class="page-item"> > <a class="page-link">.
• Put .active (current page) and .disabled (unusable link) on the page-item <li>, not the link.
• On page 1, mark Previous as disabled; the current number gets active.
• The bar is presentation only; loading the right slice of data is server or JS work.
• Links carry the page via a GET query like ?page=2.
• Memory hook: numbered tabs on a filing folder.