Blazor寻呼机概述

的Blazor寻呼机组件将使您能够在Blazor应用程序中为数据添加分页。我们在Grid和ListView等组件中使用它，您也可以将它作为一个独立的组件用于您自己的模板和数据。

Pager为用户提供更改页面的UI。对于开发人员，它提供了页面索引，这样您就可以只呈现相关的数据部分和事件你可以用它来实现按需加载．

的Pager组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建Blazor寻呼机

1. 添加TelerikPager标记到Razor文件。

2. 设置总计属性设置为数据源中的项数。

3. 设置页大小参数确定所需的数据子集。它支持双向绑定。

4. 设置页面(单向或双向绑定)参数int对象。页面索引是基于1的。

< TelerikPager总= " @Games。Count" PageSize="@PageSize" @bind- page ="@ page "> @{//获取并渲染基于分页信息的相关数据部分var pageData = Games。Skip((Page - 1) * PageSize).Take(PageSize).ToList();@foreach (Game Game in pageData) {
}} @code {public int PageSize {get;设置;} = 3;public int Page {get;设置;} = 1;public List(); for (int i = 1; i < 20; i++) { Games.Add(new Game() { GameId = i, GameName = $"Game {i}" }); } } public class Game { public int GameId { get; set; } public string GameName { get; set; } } }

事件

Blazor Pager公开PageChanged和PageSizeChanged事件，您可以处理这些事件并进一步定制其行为。阅读更多关于Blazor寻呼机事件的信息．

寻呼机参数

Blazor寻呼机提供了各种参数，允许您配置组件:

例子

按需加载

一次加载所有数据可能是一项开销很大的操作。在这种情况下，使用PageChanged事件获取要呈现的新数据子集。提供正确的信息是很重要的总计将完整数据源中的项的计数传递给组件，以便它能够呈现正确数量的页面按钮。

@{
 @foreach(游戏游戏在PagedDataToRender) {
 
 
@游戏。GameName
 
@game。GameId
 
已发布:@game.ReleaseDate.ToShortDateString() 
 
 
} 
}   @code {int TotalGames {get;设置;} int CurrPage {get;设置;} = 1;//页面索引是基于1的int PageSize {get;设置;} = 5;公共列表< int ?> GamesPerPage = new List { 5, 10, 20, null }; List PagedDataToRender { get; set; } protected override async Task OnInitializedAsync() { await LoadDataOnDemand(); } async Task PageChangedHandler(int page) { CurrPage = page; await LoadDataOnDemand(); } async Task LoadDataOnDemand() { TotalGames = await GetCountFromService(); PagedDataToRender = await GetPagedDataFromService(CurrPage - 1, PageSize); } // simulate a service below private List _allData { get; set; } = Enumerable.Range(1, 100).Select(x => new Game { GameName = $"Game {x}", GameId = x, ReleaseDate = DateTime.Now.AddDays(-x) }).ToList(); public async Task GetCountFromService() { return await Task.FromResult(_allData.Count); } public async Task> GetPagedDataFromService(int pageIndex, int pageSize) { var pagedData = _allData.Skip(pageIndex * pageSize).Take(pageSize); return await Task.FromResult(pagedData.ToList()); } // In real-case scenario this model should be in a separate file public class Game { public int GameId { get; set; } public string GameName { get; set; } public DateTime ReleaseDate { get; set; } } }

双向绑定

的页面参数支持双向绑定，因此它可以响应来自其他元素的更改，也可以更新其他元素。这是该组件最直接的用法。作为一种替代方法，请使用PageChanged事件，以便在对数据分页时实现附加逻辑，例如按需加载．

这个例子展示了当从外部输入选择页面时，Pager是如何反应的。*@ 
 选择一个页面:  
  @code {public int PageSize {get;设置;} = 3;public int Page {get;设置;} = 1;｝

下一个步骤

• 探索寻呼机事件

另请参阅

• 现场寻呼机演示
• Pager API参考
• 如何增加寻呼机下拉列表的宽度