--- title: "Pagination | Features" description: "Pagination comes in many forms with ZingGrid: incremental loading, infinite scrolling, loading by page, and flexible pager styling." url: https://www.zinggrid.com/docs/features/paging --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/features/paging.md mode: provenance representation: markdown origin_response_id: 3a0120f363960fbccb780dc0595719ef version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.698Z version_nonce: 7d9fd9ae5436da382fbc98cfc38f8861 generated_at_utc: 2026-11-06T20:29:42.338Z response_nonce: f6eeab6512eafa5eaf0523f55259c08e ``` # Paging ZingGrid has **incremental loading**, **infinite scrolling**, **load-by-page**, and **flexible** pager styling. ## Pagination To enable pagination, add the `pager` attribute **or** `` element to the `` tag, like so: ```html ``` ### Pagination Enabled Grid Here is a complete grid with pagination: [Example code](https://app.zingsoft.com/demos/embed/5KQAZL2Y) ## Page Size By default, up to **50** records are displayed per page. To adjust this amount, set the `page-size` attribute on the `` tag, like so: ```html ``` ### Page Size Option List The default 'per-page' option values from the pager's dropdown are `5,10,50`. Use `pager-size-options` to provide a new set of values, like so: ```html ``` [Example code](https://app.zingsoft.com/demos/embed/MIB9HT49) ### Card-Layout Size When a grid's width falls within the mobile-layout range, or card-layout mode has been forced, the UI changes from rows of content to individual cards. You have the ability to set the number of cards per-page differently than its row-layout mode counterpart by adding the `page-size-card` attribute to the grid (see below). This will override the default amount only in those view modes. ```html ``` > **Note:** You can also adjust the size of mobile view (typically to make it smaller) with the `page-size-card` attribute on the `` tag. [A full list of page size options can be found here](https://www.zinggrid.com/docs/api/tags/zing-grid). Try switching between card and row modes ( and ) in the "Page Size Option List" demo above to see it switch from **3** records per-page in _row_ mode to **2** cards per-page in _card_ mode. ## Pagination Type The default paging controls consist of next and previous, first and last, and direct page jump elements. To use the alternative layout, which consists of just next and previous buttons with 1 to many individual page buttons, add `pager-type` to the grid, with one of **2** variant options: * `button-arrows` - The next and previous buttons have arrow SVG icons * `button-text` - The next and previous buttons have localized `next` and `previous` text labels ```html ``` ### Alternative Pagination Layout Grids Here are two complete grids displaying the alternative pagination layouts, one with arrow icons and one with text labels: [Example code](https://app.zingsoft.com/demos/embed/7WIFM894) ## Position By default, the pager is displayed at the bottom of the grid. To place it at the top of the grid, use `[pager-position="top"]`, like so: ```html ``` ### Top Positioned Pager Here is a complete grid with the pager displayed at the top of the grid: [Example code](https://app.zingsoft.com/demos/embed/F0LYLAPP) ## External Controls Each of the pagination buttons are accessible via the grid API, like so: ```html ``` ### External Pagination Controls Grid Here is a complete grid with pagination buttons controlled via the API: [Example code](https://app.zingsoft.com/demos/embed/VIACQPLT) ## Custom Layout You can customize the appearance of your pager by slotting different pieces of it inside the grid (see below). The components **must have the same** `name` **or** `value` **associated with the built-in element**. For example, you can slot pieces of your pager in the footer of the grid, like so: ```html
Showing - of rows
``` ### Custom Pager Layout Grid Here is a complete grid with a custom pager layout: [Example code](https://app.zingsoft.com/demos/embed/6CNSEUCU) ## Server Paging Enable server paging through a couple `` options, like so: ```html ``` ### Server Paging Enabled Grid Here is a complete grid with server paging enabled: [Example code](https://app.zingsoft.com/demos/embed/2N8MT6X4) ## Cursor Paging Enable cursor paging through a couple `` options, like so: ```html ``` ### Cursor Paging Enabled Grid Here is a complete grid with cursor paging enabled: [Example code](https://app.zingsoft.com/demos/embed/H3E5ZHGN) ## Infinite Scroll To enable infinite scrolling, add the `height` attribute to your `` tag **and** the `[name="loadByScroll"]` attribute to `` with `[value="true"]`, like so: ```html ``` ### Infinite Scroll Grid Here is a complete grid with infinite scrolling enabled: [Example code](https://app.zingsoft.com/demos/embed/J0L5T5YU) ## Related Resources Here are some extra resources related to this feature to help with creating your grid: * [API Pager Methods List](https://www.zinggrid.com/docs/api-methods#zg-pager) * [Adding Features Guide](https://www.zinggrid.com/docs/adding-features) * [`` Documentation](https://www.zinggrid.com/docs/api/tags/zg-pager)