Pagination Example

Learn to handle large datasets with pagination for better performance and user experience.

What You'll Build

A paginated data view with:

• Page-based navigation
• Configurable page size
• Page information display
• Jump to page functionality

Prerequisites

• Completed the Filtering & Sorting example
• Understanding of DataGrid widget

Why Pagination Matters

Without pagination:

With pagination:

Step 1: Enable DataGrid Pagination

Configure the DataGrid:

DataGrid: Products
Data Source: Product model
Pagination:
  Enabled: true
  Page Size: 25
  Show Page Info: true
  Show Navigation: true

Step 2: Configure Page Size

Let users choose how many items to show:

Select: Page Size
Options:
  - 10 items
  - 25 items (default)
  - 50 items
  - 100 items
onChange: Update DataGrid page size

DataGrid Configuration

DataGrid: Products
Page Size: Bound to page_size_select value
Reset to page 1 when: Page size changes

Step 3: Add Page Navigation

Display page controls:

FlexContainer: Pagination Controls
├── Button: First (<<)
├── Button: Previous (<)
├── Label: "Page X of Y"
├── Button: Next (>)
├── Button: Last (>>)
└── TextField: Jump to Page

Button Configuration

Button: Previous
Disabled: When on first page
onClick: Go to previous page

Button: Next
Disabled: When on last page
onClick: Go to next page

Step 4: Show Page Information

Display result counts:

Label: Results Info
Text: "Showing {start} - {end} of {total} items"
Example: "Showing 26 - 50 of 1,234 items"

Calculate Display Values

start = (current_page - 1) * page_size + 1
end = min(current_page * page_size, total_count)

Step 5: Jump to Page

Allow direct page navigation:

TextField: Go to Page
Type: Number
Min: 1
Max: total_pages
onEnter: Navigate to entered page

Validation

If entered page > total_pages:
  Show error: "Page does not exist"
  Stay on current page

If entered page < 1:
  Go to page 1

Pagination Patterns

Simple Pagination

Basic previous/next navigation:

FlexContainer: Simple Pagination
├── Button: Previous
├── Label: "Page 1 of 10"
└── Button: Next

Full Pagination

Complete navigation with page numbers:

FlexContainer: Full Pagination
├── Button: First
├── Button: Previous
├── Button: Page 1
├── Button: Page 2
├── Button: Page 3
├── Label: "..."
├── Button: Page 10
├── Button: Next
└── Button: Last

Infinite Scroll

Load more as user scrolls (for mobile):

List: Products (Mobile)
Infinite Scroll: Enabled
Load More:
  Trigger: Near bottom of list
  Action: Fetch next page
  Append: To existing items

DataGrid Pagination Features

Server-Side Pagination

DataGrid handles pagination automatically:

DataGrid: Products
Pagination:
  Type: Server-side
  Page Size: 25

The DataGrid:
  - Sends page number to server
  - Receives only current page data
  - Shows total count

Pagination with Filters

Pagination respects active filters:

DataGrid: Products
Filter: category = "Electronics"
Pagination: Page 1 of 5 (of filtered results)

Total products: 1,000
Electronics category: 125
Pages (at 25/page): 5

Reset on Filter Change

When filters change:

DataGrid Configuration:
  On Filter Change:
    - Reset to page 1
    - Recalculate total pages
    - Update page info

Complete Paginated View

Product Catalog View
├── Panel: Toolbar
│   ├── TextField: Search
│   ├── Select: Category Filter
│   └── Select: Page Size (10, 25, 50, 100)
│
├── Panel: Results
│   ├── Label: "Showing 1-25 of 1,234 products"
│   └── DataGrid: Products
│       Columns: name, category, price, stock
│       Pagination: Enabled
│       Page Size: Bound to selector
│
└── Panel: Navigation
    ├── Button: First
    ├── Button: Previous
    ├── ButtonGroup: Page Numbers
    │   (shows 5 pages around current)
    ├── Button: Next
    ├── Button: Last
    └── FlexContainer: Jump To
        ├── TextField: Page Number
        └── Button: Go

Performance Best Practices

Choose Appropriate Page Size

Optimize Queries

DataGrid: Products
Query Optimization:
  - Select only displayed columns
  - Use indexed fields for sorting
  - Apply filters in query, not UI

Cache Page Data

For frequently accessed pages:

Caching Strategy:
  - Cache recently viewed pages
  - Prefetch next page on navigation
  - Clear cache on data changes

Pagination with Sorting

Maintain sort order across pages:

DataGrid: Products
Sort: price DESC
Pagination: Page 2

Result:
  - All products sorted by price (high to low)
  - Page 2 shows items 26-50 of sorted list

Sort + Filter + Pagination

All work together:

DataGrid: Products
Filter: category = "Electronics"
Sort: price ASC
Page: 2 of 5

Query executes:
  1. Filter by category
  2. Sort results
  3. Return page 2 (items 26-50)

Mobile Pagination

For mobile interfaces:

Load More Button

MList: Products
Pagination Style: Load More
├── Product items (current page)
└── MButton: Load More
    onClick: Append next page

Infinite Scroll

MList: Products
Infinite Scroll: Enabled
Threshold: 200px from bottom
Loading: Show spinner while fetching

Best Practices

User Experience

1. Show current position clearly
2. Make navigation buttons obvious
3. Disable unavailable actions
4. Maintain scroll position on page change

Performance

1. Always paginate large datasets
2. Use server-side pagination
3. Choose sensible default page size
4. Consider prefetching next page

State Management

1. Preserve page on filter changes (when sensible)
2. Reset to page 1 when filters change significantly
3. Remember user's preferred page size
4. Handle edge cases (empty results, deleted items)

Next Steps

• Filtering & Sorting - Combine with pagination
• Performance Guide - Optimize data loading
• Mobile Development - Mobile pagination patterns