📊 Chapter 19: Advanced Table Techniques

Paginated Tables

Client-Side Slicing, Accessible Pagination Controls, and Programmatic Focus Management

LEARNING OBJECTIVES ⌵

Implement mathematical client-side dataset slicing (startIndex, endIndex, totalPages) with dynamic page sizes.
Construct WAI-ARIA compliant pagination navigation using <nav aria-label="Pagination"> and aria-current="page".
Manage programmatic keyboard focus across page transitions to prevent assistive technology disorientation.
Build boundary-safe pagination controls with proper disabled and aria-disabled attributes.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine opening a telephone directory of 500,000 residents printed on a single 10-meter continuous scroll of paper. Unrolling and holding that scroll is heavy, unwieldy, and slow. Instead, modern books divide content into bound, numbered pages of 50 items each.

When you flip from Page 1 to Page 2 in a book, your eyes naturally glance at the top of the new page, not back at the spine or the bottom corner.

Total Items (N = 100)
Page Size = 10 items / page
Total Pages = ceil(100 / 10) = 10 pages

  Page 1:  [  0 to  9 ] ──▶ User clicks "Next Page"
  Page 2:  [ 10 to 19 ] ──▶ Focus moves to Table Top / Caption
  Page 3:  [ 20 to 29 ]
  ...
  Page 10: [ 90 to 99 ]

When paginating data tables on the client side, our system must:

Slice the active data array to the current window.
Render the current slice into the <tbody>.
Move keyboard focus up to the table container or caption so keyboard and screen reader users can immediately consume the newly displayed rows.

Technical Deep Dive & Specifications

2.1 The Mathematical Model of Pagination

Client-side pagination relies on discrete math operations:

                  ┌─────────────────────────────────┐
                  │ totalPages = ⌈ totalRows / S ⌉  │
                  └─────────────────────────────────┘
                                   │
       ┌───────────────────────────┴───────────────────────────┐
       ▼                                                       ▼
┌───────────────────────────────┐               ┌───────────────────────────────┐
│ startIndex = (P - 1) × S      │               │ endIndex = min(start + S, N)  │
└───────────────────────────────┘               └───────────────────────────────┘

Where:
  P = Current Page Number (1-indexed: 1, 2, 3...)
  S = Page Size (rows per page: 10, 25, 50...)
  N = Total Rows Count

Verification Example:

Given $N = 45$ items, and Page Size $S = 10$:

$\text{Total Pages} = \lceil 45 / 10 \rceil = 5$ pages.
Page 1: startIndex = 0, endIndex = 10 (Items 0–9, total 10)
Page 5: startIndex = 40, endIndex = 45 (Items 40–44, total 5)

2.2 Accessible Pagination Markup Anatomy (W3C Pattern)

A pagination control is a navigation landmark. Assistive technology requires specific semantic cues:

<nav aria-label="Table pagination navigation">
  <ul class="pagination-list">
    <li>
      <button type="button" aria-label="Go to previous page" disabled>
        &larr; Prev
      </button>
    </li>
    <li>
      <button type="button" aria-current="page" aria-label="Page 1">
        1
      </button>
    </li>
    <li>
      <button type="button" aria-label="Go to page 2">
        2
      </button>
    </li>
    <li>
      <button type="button" aria-label="Go to next page">
        Next &rarr;
      </button>
    </li>
  </ul>
</nav>

Semantic Attribute	Target Element	Purpose & Accessibility Rule
`aria-label="Table pagination"`	`<nav>`	Labels the navigation landmark so screen reader users know which section it controls.
`aria-current="page"`	`<button>` (Active page)	Informs screen readers that this button represents the active page currently displayed.
`aria-label="Go to page X"`	`<button>`	Provides explicit screen reader context beyond the raw number "2".
`disabled`	`<button>` (Prev/Next boundary)	Disables keyboard interaction and announces state when at page boundaries.

2.3 Focus Management & Screen Reader Flow

When a user clicks "Next Page", their focus is at the bottom of the table on the pagination button. If the DOM replaces the table contents without moving focus:

Sighted users see the new page content immediately.
Keyboard and screen reader users remain stuck at the bottom and must press Shift + Tab dozens of times to navigate backward to the top of the table.

The Solution: Set tabindex="-1" on the table element or container, and call .focus() programmatically upon page switch.

User Clicks "Next" Button [Focus at bottom]
               │
               ▼
   [ Slice & Render New Page ]
               │
               ▼
   [ tableElement.focus() ]
               │
               ▼
   Screen reader immediately reads: "Table, Page 2, 5 items"

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 128: tabindex="-1" on <table id="nodes-table"> enables the table to receive programmatic keyboard focus without polluting the native tab stop order.
Lines 145–155: The pagination footer utilizes <nav aria-label="Server nodes pagination"> and an aria-live="polite" status region.
Lines 185–191: Mathematical slicing extracts the exact subset (DATASET.slice(startIndex, endIndex)) for the current page view.
Lines 205–207: When shouldFocusTable is true, table.focus() directs the browser's active element to the table itself.
Lines 226–230: The active page button receives aria-current="page", letting assistive technologies announce it as the selected page.
Lines 216 & 247: prevBtn.disabled and nextBtn.disabled prevent out-of-bounds navigation and announce disabled states to screen readers.

Expected Browser Render Output

A server node directory displaying 5 items on Page 1.
Clicking "Next →" transitions to Page 2 (Nodes 6–10), shifts the active button highlight, and smoothly redirects keyboard focus back to the top of the table.
Changing the "Rows per page" dropdown to 10 recalculates the pagination into 2 pages and resets the view to Page 1.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Paginated Data Table</title>
  <style>
    :root {
      --color-primary: #2563eb;
      --color-bg: #f8fafc;
      --color-card: #ffffff;
      --color-border: #e2e8f0;
      --color-text: #1e293b;
      --color-text-muted: #64748b;
    }

body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--color-bg);
      color: var(--color-text);
      padding: 2rem;
      margin: 0;
    }

.table-container {
      max-width: 850px;
      margin: 0 auto;
      background: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

.table-header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      outline: none;
    }

table:focus-visible {
      box-shadow: 0 0 0 2px var(--color-primary);
      border-radius: 4px;
    }

th, td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--color-border);
    }

th {
      background-color: #f1f5f9;
      font-weight: 600;
    }

.pagination-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.25rem;
      gap: 1rem;
    }

.pagination-controls {
      display: flex;
      gap: 0.35rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }

.page-btn {
      padding: 0.45rem 0.85rem;
      border: 1px solid var(--color-border);
      background: #ffffff;
      color: var(--color-text);
      border-radius: 6px;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

.page-btn:hover:not(:disabled) {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

.page-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

.page-btn[aria-current="page"] {
      background: var(--color-primary);
      color: #ffffff;
      border-color: var(--color-primary);
      font-weight: 700;
    }

.page-size-selector {
      font-size: 0.9rem;
      color: var(--color-text-muted);
    }

.page-size-selector select {
      padding: 0.35rem 0.5rem;
      border-radius: 4px;
      border: 1px solid var(--color-border);
    }

.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  </style>
</head>
<body>

<div class="table-container">
  <div class="table-header-bar">
    <h2 style="margin:0; font-size:1.25rem;">Server Cluster Nodes</h2>
    
    <div class="page-size-selector">
      <label for="page-size">Rows per page:</label>
      <select id="page-size">
        <option value="3">3</option>
        <option value="5" selected>5</option>
        <option value="10">10</option>
      </select>
    </div>
  </div>

<table id="nodes-table" tabindex="-1" aria-describedby="pagination-status">
    <caption class="sr-only">Cluster server node status directory</caption>
    <thead>
      <tr>
        <th scope="col">Node ID</th>
        <th scope="col">Region</th>
        <th scope="col">CPU Load</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody id="table-body">
      
    </tbody>
  </table>

<div class="pagination-bar">
    <div id="pagination-status" role="status" aria-live="polite" style="font-size:0.9rem; color:var(--color-text-muted);">
      Showing 1–5 of 12 nodes
    </div>

let currentPage = 1;
    let pageSize = 5;

const tbody = document.getElementById('table-body');
    const table = document.getElementById('nodes-table');
    const paginationControls = document.getElementById('pagination-buttons');
    const paginationStatus = document.getElementById('pagination-status');
    const pageSizeSelect = document.getElementById('page-size');

function renderTable(shouldFocusTable = false) {
      const totalItems = DATASET.length;
      const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));

// Guard against page out-of-bounds
      if (currentPage > totalPages) currentPage = totalPages;
      if (currentPage < 1) currentPage = 1;

const startIndex = (currentPage - 1) * pageSize;
      const endIndex = Math.min(startIndex + pageSize, totalItems);
      const currentSlice = DATASET.slice(startIndex, endIndex);

// Render Table Rows
      tbody.innerHTML = currentSlice.map(item => `
        <tr>
          <td><code>${item.id}</code></td>
          <td>${item.region}</td>
          <td>${item.cpu}</td>
          <td><strong>${item.status}</strong></td>
        </tr>
      `).join('');

// Update Pagination Text
      paginationStatus.textContent = `Showing ${startIndex + 1}–${endIndex} of ${totalItems} nodes (Page ${currentPage} of ${totalPages})`;

// Render Pagination Buttons
      renderPaginationButtons(totalPages);

// Move focus for accessibility if triggered by user interaction
      if (shouldFocusTable) {
        table.focus();
      }
    }

function renderPaginationButtons(totalPages) {
      paginationControls.innerHTML = '';

// Previous Button
      const prevLi = document.createElement('li');
      const prevBtn = document.createElement('button');
      prevBtn.className = 'page-btn';
      prevBtn.innerHTML = '&larr; Prev';
      prevBtn.setAttribute('aria-label', 'Go to previous page');
      prevBtn.disabled = currentPage === 1;
      prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
          currentPage--;
          renderTable(true);
        }
      });
      prevLi.appendChild(prevBtn);
      paginationControls.appendChild(prevLi);

// Page Number Buttons
      for (let i = 1; i <= totalPages; i++) {
        const li = document.createElement('li');
        const btn = document.createElement('button');
        btn.className = 'page-btn';
        btn.textContent = i;
        btn.setAttribute('aria-label', `Go to page ${i}`);

if (i === currentPage) {
          btn.setAttribute('aria-current', 'page');
        }

btn.addEventListener('click', () => {
          if (currentPage !== i) {
            currentPage = i;
            renderTable(true);
          }
        });

li.appendChild(btn);
        paginationControls.appendChild(li);
      }

// Next Button
      const nextLi = document.createElement('li');
      const nextBtn = document.createElement('button');
      nextBtn.className = 'page-btn';
      nextBtn.innerHTML = 'Next &rarr;';
      nextBtn.setAttribute('aria-label', 'Go to next page');
      nextBtn.disabled = currentPage === totalPages;
      nextBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
          currentPage++;
          renderTable(true);
        }
      });
      nextLi.appendChild(nextBtn);
      paginationControls.appendChild(nextLi);
    }

// Page size dropdown listener
    pageSizeSelect.addEventListener('change', (e) => {
      pageSize = parseInt(e.target.value, 10);
      currentPage = 1; // Reset to page 1 on size change
      renderTable(false);
    });

// Initial render
    renderTable(false);
  })();
</script>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Accessible Paginated User Directory with Windowing

When a table contains 100 pages, rendering 100 number buttons overflows the screen. Enhance the pagination button generator to render a condensed sliding window with ellipses:

Always show Page 1 and Last Page.
Show current page and 1 neighbor on each side (e.g. [1] ... [4] [5*] [6] ... [20]).

Instructions:

Implement a helper function getPageNumbers(current, total) that returns an array of numbers and strings, e.g. [1, '...', 4, 5, 6, '...', 20].
Render non-clickable <span>...</span> items for ellipsis markers.
Verify that clicking any page number loads that page and updates the window.

🏁 Starter Code Sandbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Windowed Ellipsis Pagination</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; }
    .pagination { display: flex; gap: 0.25rem; list-style: none; padding: 0; align-items: center; }
    .btn { padding: 0.35rem 0.75rem; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; border-radius: 4px; }
    .btn[aria-current="page"] { background: #2563eb; color: #fff; border-color: #2563eb; }
    .dots { padding: 0.35rem 0.5rem; color: #64748b; }
  </style>
</head>
<body>

<h3>Windowed Pagination Demo (Total Pages: 20)</h3>
<nav aria-label="Windowed pagination">
  <ul id="windowed-pagination" class="pagination"></ul>
</nav>

<script>
  function getPaginationWindow(current, total) {
    if (total <= 7) {
      return Array.from({ length: total }, (_, i) => i + 1);
    }
    const pages = new Set([1, total, current, current - 1, current + 1]);
    const valid = Array.from(pages).filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
    
    const result = [];
    for (let i = 0; i < valid.length; i++) {
      if (i > 0 && valid[i] - valid[i - 1] > 1) {
        result.push('...');
      }
      result.push(valid[i]);
    }
    return result;
  }

  function renderWindow(current, total) {
    const navList = document.getElementById('windowed-pagination');
    navList.innerHTML = '';
    const items = getPaginationWindow(current, total);

    items.forEach(item => {
      const li = document.createElement('li');
      if (item === '...') {
        li.innerHTML = '<span class="dots" aria-hidden="true">&hellip;</span>';
      } else {
        const btn = document.createElement('button');
        btn.className = 'btn';
        btn.textContent = item;
        btn.setAttribute('aria-label', `Page ${item}`);
        if (item === current) btn.setAttribute('aria-current', 'page');
        btn.addEventListener('click', () => renderWindow(item, total));
        li.appendChild(btn);
      }
      navList.appendChild(li);
    });
  }

  renderWindow(5, 20);
</script>

</body>
</html>

Why this works:

The mathematical window dynamically contracts and expands around the active page cursor.
Ellipsis markers are marked with aria-hidden="true" to prevent screen readers from reading meaningless repetitive dots.
Bounded page limits prevent array index errors.

⚠️ Common Pitfalls

Focus Abandonment: Failing to shift focus back to the top of the table leaves keyboard-only users stranded at the bottom navigation controls.
Using Non-Semantic <div> Buttons: Building pagination out of <div> tags without role="button", tabindex="0", and Enter/Space handlers locks out keyboard users. Always use <button type="button">.
Missing aria-current="page": Sighted users see color changes, but screen reader users only know which page is active if aria-current="page" is set.
Off-by-One Array Index Calculation: Using (page - 1) * pageSize for startIndex is critical; calculating page * pageSize skips the entire first page!

💡 Pro Tips

URL Hash or Query String Synchronization: Persist the active page in the browser URL (?page=3&size=25) using window.history.pushState() so users can bookmark and refresh without losing their place.
Pre-Fetching Neighbor Pages: For server-backed pagination, pre-fetch page $N+1$ in the background while the user reads page $N$ for zero-latency page turns.
Preserving Scroll Position: When pagination causes page layout shifts, use table.scrollIntoView({ behavior: 'smooth', block: 'start' }) to align the viewport.

📌 Key Takeaways

Compute page bounds using startIndex = (currentPage - 1) * pageSize and endIndex = Math.min(startIndex + pageSize, totalItems).
Wrap pagination buttons inside <nav aria-label="..."> to establish a semantic accessibility landmark.
Mark the active page button using aria-current="page".
Shift focus programmatically to the table (tabindex="-1") after page transitions to maintain logical reading order for screen reader users.
Always disable navigation boundary buttons (disabled on Prev on page 1, Next on last page).
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why should `<table tabindex="-1">` receive focus via JavaScript after a user clicks a pagination button?

Topic: HTML Fundamentals

? Question 2 / 3

What attribute must be placed on the pagination button corresponding to the currently active page?

Topic: HTML Fundamentals

? Question 3 / 3

If a dataset contains 32 items and the page size is set to 10, what are the `startIndex` and `endIndex` for Page 4 (the final page)?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

2.1 The Mathematical Model of Pagination

Verification Example:

2.2 Accessible Pagination Markup Anatomy (W3C Pattern)

2.3 Focus Management & Screen Reader Flow

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Accessible Paginated User Directory with Windowing

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why should <table tabindex="-1"> receive focus via JavaScript after a user clicks a pagination button?

What attribute must be placed on the pagination button corresponding to the currently active page?

If a dataset contains 32 items and the page size is set to 10, what are the startIndex and endIndex for Page 4 (the final page)?

Why should `<table tabindex="-1">` receive focus via JavaScript after a user clicks a pagination button?

If a dataset contains 32 items and the page size is set to 10, what are the `startIndex` and `endIndex` for Page 4 (the final page)?