← All posts

How to Create Simple Pagination Using Just HTML, CSS, and JavaScript

·4 min read·Read on Medium

Intro

This is a blog post written to explain what pagination is and how it works. I started learning about this a few weeks ago and wanted to share how I built it from scratch without any libraries or frameworks.

Tools used: HTML, CSS and Javascript.

What is Pagination?

Pagination is a technique used in web development and UI design to divide large sets of content (like data tables, blog posts, products, etc.) into smaller, more manageable sections or "pages" where a user can use links such as "next", "previous", and page numbers to navigate between pages that display one page of results at a time.

How Pagination Works

Pagination works by:

The Setup

I created a simple page with dummy data that breaks a list of items into smaller sections, showing only a subset at a time, and allowing users to navigate between pages. Users can click "Next," "Previous," or the page numbers to move between pages.

Step 1: HTML Structure

I created a basic HTML structure with two tables: the first is visible, the second has the class hidden and is set to display: none.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pagination Task</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Table 1 (visible by default) -->
      <table class="table1">
        <thead>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>TechNova Solutions</td><td>Sarah Johnson</td><td>USA</td></tr>
          <tr><td>Quantum Innovations</td><td>David Smith</td><td>Canada</td></tr>
          <tr><td>SolarEdge Systems</td><td>Emily Tan</td><td>Australia</td></tr>
          <tr><td>NexaTech Industries</td><td>Ahmed Khan</td><td>UAE</td></tr>
          <tr><td>GreenVolt Energy</td><td>Laura Martinez</td><td>Spain</td></tr>
        </tbody>
      </table>

      <!-- Table 2 (hidden by default) -->
      <table class="table2 hidden">
        <thead>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>CyberWave Security</td><td>Tom Andersen</td><td>Denmark</td></tr>
          <tr><td>AlphaCore Software</td><td>Priya Patel</td><td>India</td></tr>
          <tr><td>Visionary Robotics</td><td>Kenji Yamamoto</td><td>Japan</td></tr>
          <tr><td>AeroSpace Dynamics</td><td>Michael O'Connor</td><td>Ireland</td></tr>
          <tr><td>BlueHorizon Biotech</td><td>Sofia Almeida</td><td>Brazil</td></tr>
        </tbody>
      </table>

      <!-- Pagination Controls -->
      <div class="pagination">
        <a href="#" class="arrow">&#8249;</a>
        <a href="#" class="page">1</a>
        <a href="#" class="page">2</a>
        <a href="#" class="arrow">&#8250;</a>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Step 2: CSS

The CSS styles the tables, handles layout, and hides one table using the .hidden class. It also styles the pagination buttons for a clean, user-friendly look.

:root {
  --color-bg: gainsboro;
  --color-surface: #f5f5f5;
  --color-muted: gray;
  --color-white: white;
  --color-border: #ddd;
  --color-primary: steelblue;
  --color-primary-light: #e3eafd;
  --color-accent: dodgerblue;
  --color-ink: black;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-bg);
}

.container {
  width: 50%;
  padding: 2em;
  border-radius: 10px;
  background-color: var(--color-surface);
}

.pagination {
  margin-top: 1em;
}

.pagination a {
  color: var(--color-ink);
  padding: 0.5em 1em;
  text-decoration: none;
  transition: background-color 0.3s;
}

.page {
  background-color: transparent;
  border-radius: 8px;
  border: 0.5px solid var(--color-muted);
}

.page:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.arrow {
  border-radius: 7px;
  background-color: transparent;
  border: 0.5px solid var(--color-muted);
}

.arrow:hover {
  background-color: var(--color-border);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  color: var(--color-primary);
  margin-bottom: 1em;
}

td, th {
  border: 0.5px solid transparent;
  text-align: left;
  padding: 0.5em;
}

tr:nth-child(even) {
  background-color: var(--color-primary-light);
  color: var(--color-ink);
}

.hidden {
  display: none;
}

Step 3: JavaScript

I selected the classes for each table and the pagination buttons. Then I used a simple for loop to add event listeners that detect click events on the pagination buttons.

'use strict';

const table1 = document.querySelector('.table1');
const table2 = document.querySelector('.table2');
const pages = document.querySelectorAll('.page');
const arrows = document.querySelectorAll('.arrow');

const pagination = function (index) {
  if (index === 0) {
    table1.classList.remove('hidden');
    table2.classList.add('hidden');
  } else if (index === 1) {
    table1.classList.add('hidden');
    table2.classList.remove('hidden');
  }
};

for (let i = 0; i < pages.length; i++) {
  pages[i].addEventListener('click', function () {
    pagination(i);
  });
}

Why Pagination Matters

Conclusion

This was my first time building a pagination, and I did it using just basic JavaScript. It's a great starting point before diving into more advanced solutions like API-driven or server-side pagination. As I keep learning, I plan to improve this version and explore more dynamic approaches. If you're a beginner, try building your own version — you'll learn a lot by doing it from scratch.

You can check out the full code on GitHub.

Found this helpful? Reach out on X (Twitter) — I'm always open to connect.