How to Create Pagination in Svelte: Simple Guide with Example

To create pagination in Svelte, use reactive variables to track the current page and slice your data array accordingly. Add buttons or links to change the page, updating the reactive state to re-render the visible items.

Syntax

Pagination in Svelte typically involves these parts:

• let currentPage = 1; — tracks the current page number.
• const itemsPerPage = 5; — sets how many items show per page.
• const totalPages = Math.ceil(items.length / itemsPerPage); — calculates total pages.
• $: pagedItems = items.slice(start, end); — reactive statement to get items for the current page.
• Buttons or links to update currentPage and navigate pages.

svelte

let currentPage = 1;
const itemsPerPage = 5;
const totalPages = Math.ceil(items.length / itemsPerPage);

$: start = (currentPage - 1) * itemsPerPage;
$: end = start + itemsPerPage;
$: pagedItems = items.slice(start, end);

Example

This example shows a list of 20 items with pagination controls to navigate pages showing 5 items each.

svelte

<script>
  let currentPage = 1;
  const itemsPerPage = 5;
  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
  const totalPages = Math.ceil(items.length / itemsPerPage);

  $: start = (currentPage - 1) * itemsPerPage;
  $: end = start + itemsPerPage;
  $: pagedItems = items.slice(start, end);

  function goToPage(page) {
    if (page >= 1 && page <= totalPages) {
      currentPage = page;
    }
  }
</script>

<div>
  <ul>
    {#each pagedItems as item}
      <li>{item}</li>
    {/each}
  </ul>

  <button on:click={() => goToPage(currentPage - 1)} disabled={currentPage === 1} aria-label="Previous page">Previous</button>
  <span> Page {currentPage} of {totalPages} </span>
  <button on:click={() => goToPage(currentPage + 1)} disabled={currentPage === totalPages} aria-label="Next page">Next</button>
</div>

Output

A list showing 5 items (e.g., Item 1 to Item 5) with Previous and Next buttons to navigate pages. Buttons disable at first and last pages.

Common Pitfalls

Common mistakes when creating pagination in Svelte include:

• Not using reactive statements ($:) to update the sliced items when currentPage changes.
• Forgetting to disable navigation buttons on first or last pages, causing invalid page numbers.
• Not validating page numbers before setting currentPage, which can cause errors or empty lists.
• Not handling empty data arrays, which can break the UI.

svelte

<script>
  // Wrong: Not reactive, pagedItems won't update on currentPage change
  let currentPage = 1;
  const itemsPerPage = 5;
  const items = ['A', 'B', 'C', 'D', 'E', 'F'];
  const totalPages = Math.ceil(items.length / itemsPerPage);

  // This does not update when currentPage changes
  const pagedItems = items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

  // Right: Use reactive statement
  $: pagedItems = items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
</script>

Quick Reference

Tips for smooth pagination in Svelte:

• Use $: reactive statements to update visible items.
• Calculate total pages with Math.ceil(items.length / itemsPerPage).
• Disable navigation buttons when on first or last page.
• Validate page numbers before updating state.
• Keep UI accessible with aria-label on buttons.

Key Takeaways

Use reactive statements ($:) to update paged items when currentPage changes.

Calculate total pages with Math.ceil and slice your data array accordingly.

Disable navigation buttons on first and last pages to prevent invalid navigation.

Validate page numbers before updating currentPage to avoid errors.

Add accessibility labels to pagination controls for better user experience.