Pagination server side

Efficiently handle and display huge datasets by implementing server-side pagination, reducing load times and improving performance.

Example

Id
Name
Category
Price Retail
Status
1
Sleek Plastic Computer
Beauty
114.71
low-stock
2
Generic Bronze Towels
Clothing
215.7
in-stock
3
Incredible Granite Chair
Home & Garden
372.47
discontinued
4
Oriental Metal Pants
Electronics
490.23
backordered
5
Fantastic Ceramic Bacon
Sports
260.04
low-stock
6
Luxurious Ceramic Gloves
Clothing
477.12
low-stock
7
Gorgeous Steel Bacon
Home & Garden
267.37
discontinued
8
Tasty Silk Fish
Electronics
1722.59
in-stock
9
Fresh Silk Shoes
Electronics
1404.24
low-stock
10
Practical Aluminum Mouse
Electronics
1948.73
in-stock
Per page:
Page 1 of 100
Showing 1 to 10 of 1000 rows
{
  "page": 1,
  "pageSize": 10,
  "pageSizes": [
    10,
    20,
    50,
    100
  ],
  "pageCount": 100
}

+Page.ts example

import { inventoryData } from "$lib/data/data-storage.svelte.js"; import { error } from '@sveltejs/kit'; // Helper function to add sleep (delay) const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)); export const load = async ({ url, params }) => { try { // Sleep for 100ms before proceeding await sleep(1000); // Pagination logic for inventory const page = Number(url.searchParams.get('page') || 1); const pageSize = Number(url.searchParams.get('pageSize') || 10); const totalInventory = inventoryData; const startIndex = (page - 1) * pageSize; const endIndex = startIndex + pageSize; return { inventory: totalInventory.slice(startIndex, endIndex), totalCount: totalInventory.length, currentPage: page, pageSize: pageSize, }; } catch (e) { console.error(e); error(404, 'something went wrong'); } };