pagination

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        A grid showcasing pagination functionality, allowing users to navigate through large datasets with ease.
        Features include page navigation buttons, customizable rows per page selection, and status information showing
        current page and total records.
    </p>
</div>

CSS

@import url("http://localhost:3030/code/grid/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.demo {
    padding: 8px 12px;
}

.highcharts-description {
    padding: 0 8px;
}

JavaScript

const API_BASE = "https://dataset-server-hc-production.up.railway.app";
const columnsInclude = ["employeeId", "firstName", "lastName", "department"];

// Buffer settings: keep 3 pages before and after current page
const BUFFER_PAGES = 3;

let grid = null;
let totalRows = 0;
let currentPageSize = 10;
let loadedPages = new Set(); // Track which pages are already loaded

// Fetch a page from the server
async function fetchPage(page, pageSize) {
  const params = new URLSearchParams({
    dataset: "large",
    format: "js",
    columnsInclude: columnsInclude.join(","),
    page,
    pageSize,
  });

  const res = await fetch(`${API_BASE}/data?${params.toString()}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// Create placeholder columns for total row count
function createPlaceholders(count) {
  const placeholders = {};
  columnsInclude.forEach(col => {
    placeholders[col] = Array(count).fill("");
  });
  return placeholders;
}

// Load a page and fill directly into grid.dataTable.columns
async function loadPageIntoGrid(page, pageSize) {
  // Ensure numbers
  page = Number(page);
  pageSize = Number(pageSize);

  if (loadedPages.has(page)) {
    return false; // Already loaded
  }

  const totalPages = Math.ceil(totalRows / pageSize);
  if (page < 1 || page > totalPages) {
    return false; // Invalid page
  }

  console.log(`Fetching page ${page} with pageSize ${pageSize}...`);
  const pageData = await fetchPage(page, pageSize);
  const startIndex = (page - 1) * pageSize;

  // Get the number of rows from the first column's array length
  const firstCol = columnsInclude[0];
  const rowCount = pageData.data[firstCol] ? pageData.data[firstCol].length : 0;

  console.log(`startIndex: ${startIndex}, rowCount: ${rowCount}`);

  // Update grid.dataTable.columns directly
  columnsInclude.forEach(col => {
    const values = pageData.data[col] || [];
    for (let i = 0; i <...