We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Add-Ons
default app icon

Grid Pagination

By mithra62
Navigation Templating

Description

Adds native pagination capabilities to Grid fields in ExpressionEngine—something not available out of the box. It enables you to paginate rows within a Grid field, making it easier to display large datasets in manageable chunks. This add-on is free and supports ExpressionEngine 6.4 (and above) and ExpressionEngine 7.2 (and above).

Brings row-level pagination into Grid fields. Compatible with EE 6.4+ and EE 7.2+, it’s a lightweight way to enhance both performance and usability when displaying Grid content in templates.

Summary

Feature Details
Purpose Add pagination to Grid fields (row-level pagination)
Integration Grid field tag parameters in templates
Compatible With EE 6.4+ and EE 7.2+
Ideal For Large Grid datasets, listings, FAQs, admin interface usability

Typical Use Cases

Long Grid Data Sets

  • If a Grid field contains many rows (e.g., FAQs, pricing tiers, listings), pagination improves performance and UI by loading only a subset at a time.

Clean Front-End Output

  • Display Grid rows in paged lists or tables on public-facing pages, avoiding overwhelming users with long scrolls.

Features

Paginate Grid Rows

  • Provides parameters to limit and paginate rows inside Grid field tags in your templates, similar to how {exp:channel:entries} pagination works, but within a Grid.

Seamless Template Integration

  • Compatible with ExpressionEngine 6.4+, including ExpressionEngine 7.2+.

Supports Modern EE Versions

  • When you want to display the option label instead of its value in templates, append :label to the field’s variable. {my_field_name:label} This will render the human-readable label corresponding to the chosen value.

How It Helps

Improved Performance & Scalability

  • Loading only a limited number of Grid rows per page reduces memory usage and processing time.

Better User Experience

  • Both editors and visitors benefit from cleaner, more navigable data displays when working with large Grid datasets.

Simplifies Template Logic

  • Instead of manually looping and slicing Grid rows, Grid Pagination handles the logic through intuitive parameters.

Documentation

Basic Example

{exp:grid_pagination:field_params
    field_id='4'
    url_title="{segment_3}"
    channel="blog"
    limit="2"
    url_segment="4"
}

{exp:channel:entries url_title="{segment_3}" dynamic="false" limit='1' require_entry='yes'}

    {!-- content output --}
    <h1>{title}</h1>

    {!-- image (GRID) --}
    {if blog_image}
        {blog_image offset="{grid:offset}" limit="{grid:limit}"}
            <figure>
                <img src="{blog_image:image}" alt="{blog_image:caption:attr_safe}">
                <figcaption>{blog_image:caption}</figcaption>
            </figure>
            {blog_image:grid_encryption}
            <p>
                {blog_image:test_grid_datalist:label}
            </p>
        {/blog_image}
        {embed="blog/_grid-pagination"}
    {/if}
{/exp:channel:entries}
{/exp:grid_pagination:field_params}

Considerations

Due to how ExpressionEngine parses templates (and/or my limited understanding of it) there are some key requirements to keep in mind for this Add-on.

  1. Parse order is a thing, so the grid_pagination:field_params tag MUST wrap around the channel:entries tag and cannot be nested within.
  2. Since the channel:entries tag can contain its own pagination, you should implement your pagination as an embed.
  3. You have to add 2 parameters to your Grid fields for output offset and limit

Requirements

At least PHP >= 8.0 and ExpressionEngine >= 6.4 or >= 7.2

Tags

field_params

This tag is used to seed the offset and limit values into the Grid tag.

Parameters

field_id This parameter should be the integer value for the specific Grid field you want to paginate data from

entry_id The specific Channel Entry your Grid field resides in

channel The Channel short name to relate to a url_title parameter

url_title The url_title value for the entry you want (requires channel param)

limit How many Grid items you want per page

url_segment The number the pagination URL segment comes from. (optional, default is 3)

prefix A unique letter to differentiate pagination units. (optional, default is “G”)

Example
{exp:grid_pagination:field_params field_id='FIELD_ID' entry_id="ENTRY_ID" limit="2"}
Channel Entries Tag Here 
{/exp:grid_pagination:field_params}

Pagination

Used to output the pagination links for your Grid field. This tag uses the exact same pagination logic as regular ExpressionEngine pagination.

Parameters

field_id This parameter should be the integer value for the specific Grid field you want to paginate data from

entry_id The specific Channel Entry your Grid field resides in

channel The Channel short name to relate to a url_title parameter

url_title The url_title value for the entry you want (requires channel param)

limit How many Grid items you want per page

url_segment The number the pagination URL segment comes from. (optional, default is 3)

prefix The string you want to delineate your pagination from others. Defaults to G (for Grid)

Note that this tag uses the native Pagination tooling for ExpressionEngine, so all those paramters and tags work here too

Example
{exp:grid_pagination:pagination
    field_id='4'
    url_title="{segment_3}"
    channel="blog"
    limit="2"
    url_segment="4"
}
    {paginate}
        {pagination_links}
            {first_page}
                <a href="{pagination_url}" class="page-first">First Page</a>
            {/first_page}
            {previous_page}
                <a href="{pagination_url}" class="page-previous">Previous Page</a>
            {/previous_page}
            {page}
                <a href="{pagination_url}" class="page-{pagination_page_number} {if current_page}active{/if}">{pagination_page_number}</a>
            {/page}
            {next_page}
                <li><a href="{pagination_url}" class="page-next">Next Page</a>
            {/next_page}
            {last_page}
                <li><a href="{pagination_url}" class="page-last">Last Page</a>
            {/last_page}
        {/pagination_links}
    {/paginate}
{/exp:grid_pagination:pagination}
Information
Version 1.0.0
Last Update 2 years ago
Compatibility EE 7, 6
License Commercial
Links
  • Documentation
  • Support
ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.