--- title: Filtering and paging data related: - https://docs.kentico.com/k81/custom-development/developing-web-parts/advanced-web-part-development-scenarios/developing-custom-filters.md - https://docs.kentico.com/k81/references/kentico-controls/generic-controls/paging-controls/unipager.md - https://docs.kentico.com/k81/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/k81/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/k81/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md)). See the documentation of the [UniPager control](https://docs.kentico.com/k81/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/k81/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/k81/developing-websites/loading-and-displaying-data-on-websites/loading-page-data.md) and [query](https://docs.kentico.com/k81/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/k81/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 product data. You can use the same approach for any type of data. > **Note:** **Note**: The example works with product pages from the sample Corporate site. ### Creating the product list Start by creating a page with components that generate a basic list of products: 1. Open the **Pages** application. 2. [Create a new page](https://docs.kentico.com/k81/managing-website-content/working-with-pages/creating-new-pages.md) on your website. 3. Open the **Design** tab. 4. [Add](https://docs.kentico.com/k81/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Products data source** web part onto the page. 5. Leave the default values in the **Web part properties** dialog and click **OK**. 6. Add the **Basic repeater** web part below the data source. 7. Set the following properties for the Basic repeater: - **Data source name**: ProductsDataSource _(the default ID of the Products data source web part)_ - **Transformation name**: CMS.Product.Default 8. **Save & Close**. The data source loads all product pages on the website, and the connected Basic repeater displays the data on the page. ![Design tab of a page after adding the Products data source and Basic repeater web parts](https://docs.kentico.com/docsassets/k81/filtering-and-paging-data/ProductDataBasic.png "Design tab of a page after adding the Products data source and Basic repeater web parts") ### Adding a filter The system provides a default filter that allows users to limit which products the page displays (based on various criteria). To integrate the filter: 1. [Add](https://docs.kentico.com/k81/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Product filter** web part above the Basic repeater. 2. Set the web part's **Filter name** property to _**ProductFilter**_. 3. Click **OK**. 4. Configure (double-click) the Products data source web part. 5. Type the filter's name (_ProductFilter_) into the data source's **Filter name** property. 6. Click **OK**. The filter is now connected to the 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 products that have the _Featured_ **Status** and sort the items by price from high to low. ![Products filter web part on the live site](https://docs.kentico.com/docsassets/k81/filtering-and-paging-data/ProductFilter.png "Products 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 products: 1. [Add](https://docs.kentico.com/k81/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 **OK**. 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 products, and allows users to switch between pages. ![Default appearance of the Universal pager below a list of data](https://docs.kentico.com/docsassets/k81/filtering-and-paging-data/ProductPager.png "Default appearance of the Universal pager below a list of data")