Skip to main content

How to implement pagination with FT4

This recipe demonstrates how to implement cursor-based pagination using FT4 utilities in Rell and consume it from a client. This approach is ideal for projects already using FT4, as it leverages pagination helpers from lib.ft4.utils for consistent cursor handling.

Prerequisites​

Demo script​

Key Features​

This recipe includes examples for:

  • Cursor-based pagination - Using FT4's cursor system for efficient data traversal
  • Rell implementation - Server-side pagination logic using lib.ft4.utils
  • Client consumption - JavaScript client that handles pagination requests
  • Consistent pagination - Following FT4 patterns for standardized pagination across your dapp

Architecture Overview​

The recipe includes both server and client components:

Rell Module (Server-side)​

  • Entity: user with name field for demonstration
  • Query: get_users_paginated with page_size and page_cursor parameters returning FT4-style result with data and next_cursor
  • Operation: add_user for seeding test data

JavaScript Client​

  • First page request - Fetches initial data with page_cursor set to null
  • Subsequent pages - Uses next_cursor from previous response
  • Page size control - Configurable page size per request

FT4 Pagination Pattern​

The Rell implementation uses FT4 utilities for consistent pagination:

  • Uses ft4_utils.before_rowid to handle cursor positioning
  • Employs ft4_utils.pagination_result for data formatting
  • Utilizes ft4_utils.fetch_data_size for proper page sizing
  • Returns results via ft4_utils.make_page for standardized response format

Client Usage Pattern​

The JavaScript client demonstrates the standard pagination flow:

  • Initial request sets page_cursor to null for the first page
  • Subsequent requests use the next_cursor value from previous responses
  • Page size can be adjusted per request for flexible data loading

Use Cases​

This pagination approach is ideal for:

  • Large datasets - Efficiently browsing through extensive records
  • User interfaces - Implementing paginated lists and tables
  • API endpoints - Providing paginated data to frontend applications
  • Performance optimization - Reducing memory usage and response times

Learn more​