---
title: Filtering and paging data
related:
  - https://docs.kentico.com/k11/custom-development/developing-web-parts/advanced-web-part-development-scenarios/developing-custom-filters.md
  - https://docs.kentico.com/k11/references/kentico-controls/generic-controls/paging-controls/unipager.md
  - https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Paging and filtering are features that help users navigate through large lists of data.

_**Filters**_ allow users to limit which data is displayed directly on the live site. The system provides several built-in filters for various types of data, and also allows developers to [create custom filters](https://docs.kentico.com/k11/custom-development/developing-web-parts/advanced-web-part-development-scenarios/developing-custom-filters.md). Filters connect to data sources, and dynamically generate additional conditions that the system applies when loading data.

_**Pagers**_ separate lists of data into multiple pages and provide navigation between the pages. To implement paging, connect a **Universal pager** to your listing components. You have full control over the appearance of the pager (the design is based on [transformations](https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md)). See the documentation of the [UniPager control](https://docs.kentico.com/k11/references/kentico-controls/generic-controls/paging-controls/unipager.md) for details.

> **Note:** **Note**: When adding filters or pagers to lists of data, we strongly recommend using a separate data source web part connected to _**Basic**_ listing web part. Because of differences in the life cycle of individual components, filters and pagers may not work correctly in all possible scenarios for web parts with built-in data sources.

The diagram below illustrates how to link together data web parts with a pager and filter. You can place the web parts anywhere on the same page without any change in functionality. The captions at the beginning and end of the lines between the web parts show the properties that connect the components. The linked properties must have identical values.

![Diagram showing how filters and pagers connect with data web parts. The properties next to the connecting lines must have identical values.](https://docs.kentico.com/docsassets/k11/filtering-and-paging-data/Filter_Pager_Diagram.png "Diagram showing how filters and pagers connect with data web parts. The properties next to the connecting lines must have identical values.")

> **Info:** **Data loading when using paging**
>
> By default, [page](https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites/loading-page-data.md) and [query](https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites/loading-data-using-custom-queries.md) data sources _load data per-page_ when you connect a Universal pager. Instead of retrieving the full data for all pages, the data source loads and [caches](https://docs.kentico.com/k11/configuring-kentico/optimizing-website-performance/configuring-caching/caching-the-data-of-page-components.md) individual pages separately, which reduces the initial load time. You can disable per-page loading through the **Load pages individually** property of data source web parts (in the **System settings** category).
>
> **Note**: To use per-page loading for query and page attachment data sources, you need to fill in values into the **ORDER BY expression** and **Selected columns** properties.

## Example

The following example demonstrates how to provide filtering and paging functionality for a list of articles. You can use the same approach for any type of data.

> **Note:** **Note**: The example works with data from the sample _Dancing Goat_ site. You can, for example, replace the original **Repeater** web part for displaying articles on the **Articles** page.

### Creating the list of articles

Start by creating a page with components that generate a basic list of articles:

1. Open the **Pages** application.
2. [Create a new page](https://docs.kentico.com/k11/managing-website-content/working-with-pages/creating-new-pages.md) on your website.
3. Open the **Design** tab.
4. [Add](https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Pages data source** web part onto the page.
5. Set the following properties for the **Pages data source**:

   - **Path**: /Articles/%
   - **Page types**: DancingGoat.Article
6. Click **Save & Close**.
7. Add the **Basic repeater** web part below the data source.
8. Set the following properties for the **Basic repeater**:

   - **Data source name**: PagesDataSource _(the default ID of the Pages data source web part)_
   - **Transformation name**: DancingGoat.Article.List
   - **Selected item transformation**: DancingGoat.Article.Detail
9. Click **Save & Close**.

The data source loads all pages with articles on the website, and the connected **Basic repeater** displays the data on the page.

![Design tab of a page after adding the Page data source and Basic repeater web parts](https://docs.kentico.com/docsassets/k11/filtering-and-paging-data/using_page_data_source_with_basic_repeater.png "Design tab of a page after adding the Page data source and Basic repeater web parts")

### Adding a filter

The system provides a default filter that allows users to limit which articles the page displays (based on various criteria). To integrate the filter:

1. [Add](https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Page name filter** web part above the Basic repeater.
2. Set the web part's **Web part control ID** property to _PageNameFilter_.
3. Click **Save & Close**.
4. Configure (double-click) the **Pages data source** web part.
5. Type the filter's name (_PageNameFilter_) into the data source's **Filter name** property.
6. Click **Save & Close**.

The filter is now connected to the **Pages data source** web part. The data source loads a limited set of items according to the selected filter options.

You can try out the filter on the live site. For example, use the filter to display only articles containing the word _techniques_.

![Page name filter web part on the live site](https://docs.kentico.com/docsassets/k11/filtering-and-paging-data/filtering_techniques.png "Page name filter web part on the live site")

### Setting up paging

Paging can be useful when displaying a large number of records. To add a pager to the list of articles:

1. [Add](https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Universal pager** web part onto the page, below the **Basic repeater**.
2. Set the following properties for the pager:

   - **Target control name**: BasicRepeater _(the default ID of the Basic repeater web part)_
   - **Page size**: 3
   - **Paging mode**: Postback
   - **Pager layout transformation**: CMS.PagerTransformations.General-PagerLayout
3. Click **Save & Close**.

The Universal pager connects to the **Basic repeater** and separates the displayed data into multiple shorter pages.

You can try out the pager on the live site. The page now only includes up to 3 articles, and allows users to switch between pages.

![Default appearance of the Universal pager below a list of data](https://docs.kentico.com/docsassets/k11/filtering-and-paging-data/paging_articles.png "Default appearance of the Universal pager below a list of data")