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
Electronic Concrete Cheese
Clothing
35.04
low-stock
2
Small Steel Sausages
Beauty
419.74
in-stock
3
Licensed Silk Table
Beauty
347.56
in-stock
4
Tasty Marble Fish
Sports
432.39
in-stock
5
Soft Concrete Pants
Home & Garden
107.54
in-stock
6
Luxurious Ceramic Pizza
Home & Garden
229.65
in-stock
7
Bespoke Aluminum Salad
Home & Garden
207.15
in-stock
8
Handmade Wooden Hat
Sports
167.68
in-stock
9
Modern Plastic Pants
Clothing
456.36
in-stock
10
Modern Plastic Fish
Sports
45.59
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'); } };