---
sidebar_position: 7
title: Blazorise pagination
---

## Utiliser la pagination avec Blazorise

Maintenant que vous avez une grille fonctionnelle, il est possible que votre application vous renvoie beaucoup plus de données, afin de garder un affichage fluide, il est possible de mettre en place de la pagination.

## Ajouter la pagination à la grille

Afin de parametrer la pagination ouvrez le fichier `Pages/List.razor` et ajouter le code en surbrillance à votre page :

```cshtml title="Pages/List.razor"
@page "/list"
@using Minecraft.Crafting.Models

<h3>List</h3>

<DataGrid TItem="Item"
          Data="@items"
// highlight-start
          ReadData="@OnReadData"
          TotalItems="@totalItem"
          PageSize="10"
          ShowPager
// highlight-end
          Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).EnchantCategories))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).RepairWith))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
</DataGrid>
```

## Ajouter le code de pagination

Ouvrez le fichier `Pages/List.razor.cs` et modifier le code comme suite :

```csharp title="Pages/List.razor.cs"
public partial class List
{
	private List<Item> items;

	private int totalItem;

	[Inject]
	public HttpClient Http { get; set; }

	[Inject]
	public NavigationManager NavigationManager { get; set; }

	private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
	{
		if (e.CancellationToken.IsCancellationRequested)
		{
			return;
		}

		// When you use a real API, we use this follow code
		//var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
		var response = (await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();

		if (!e.CancellationToken.IsCancellationRequested)
		{
			totalItem = (await Http.GetFromJsonAsync<List<Item>>($"{NavigationManager.BaseUri}fake-data.json")).Count;
			items = new List<Item>(response); // an actual data for the current page
		}
	}
}
```