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
Generic Concrete Pizza
Sports
463.16
in-stock
2
Sleek Granite Computer
Sports
286.58
in-stock
3
Gorgeous Steel Chicken
Sports
14.94
in-stock
4
Modern Ceramic Cheese
Clothing
358.83
in-stock
5
Tasty Concrete Ball
Home & Garden
57.13
in-stock
6
Practical Cotton Chicken
Clothing
345.04
in-stock
7
Intelligent Bronze Mouse
Electronics
910.28
discontinued
8
Soft Cotton Chicken
Beauty
450.26
in-stock
9
Tasty Wooden Salad
Beauty
214.6
in-stock
10
Ergonomic Steel Keyboard
Beauty
141.71
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'); } };