Angular - 分页器

Quiz

什么是 Paginator？

paginator 是一种用户界面组件，它允许用户通过将大量数据分成多个页面来导航数据。它提供用于在页面之间移动的控件，例如下一个、上一页、第一页和最后一页按钮，以及当前页码的指示。

您可以在 Angular 应用程序中使用 paginator 来显示数据表格、搜索结果和列表视图。它通过将数据分解成较小的块来显示数据。它还可以减少加载时间并提高性能。Paginator 使您的应用程序更用户友好，因为它为用户提供了组织化的数据导航方式。

Paginator 出现在数据表格、搜索结果或列表的底部。它有按钮用于移动到下一页或上一页，以及跳转到第一页或最后一页的按钮。此外，它还会显示当前页码和总页数。

在 Angular 中创建 Paginator

要在 Angular 应用程序中创建 paginator，请使用其 Material UI 组件库。它由 Google 开发，并遵循 Material Design 原则。它拥有丰富的 UI 组件集，例如按钮、表单、对话框等。只需最少的代码，您就可以将这些即用型组件添加到您的应用程序中。

可以通过以下两个步骤添加 paginator −

首先，导入 MatPaginatorModule。
导入后，将 <mat-paginator> 元素添加到您的模板中，并使用 length、pageSize 和 pageSizeOptions 等属性进行配置。

示例 - 分页器的使用

以下示例演示了如何在您的 Angular 应用中添加分页器。

步骤 1： 创建一个新的 Angular 项目。给项目命名，您可以随意命名，我们将其命名为 paginator-app。

ng new paginator-app

步骤 2： 现在，使用以下命令导航到新创建的应用 −

cd paginator-app

步骤 3： 使用以下命令将 Angular Material 添加到您的应用中 −

ng add @angular/material

在添加 Angular Material 时，CLI 会询问不同的配置选项。对于每个配置，选择默认选项。

步骤 4： 打开 app.html 并添加以下代码 −

app.html

<mat-paginator 
  [length]="totalItems" 
  [pageSize]="pageSize" 
  [pageSizeOptions]="[5, 10]" 
  (page)="onPageChange($event)">
</mat-paginator>

<table mat-table [dataSource]="data">
  <ng-container matColumnDef="item">
    <th mat-header-cell *matHeaderCellDef> Item </th>
    <td mat-cell *matCellDef="let element"> {{element}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['item']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['item']"></tr>
</table>
<router-outlet />

步骤 5： 打开 app.ts 并添加以下代码 −

app.ts

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatPaginatorModule } from '@angular/material/paginator'; 
import { MatTableModule } from '@angular/material/table';
import { PageEvent } from '@angular/material/paginator';
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, CommonModule, MatPaginatorModule, MatTableModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {
  totalItems = 10;  // 项目的总数 
  pageSize = 5;     // 每页项目数
  data: any[] = []; 
  currentPage = 0;   

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    const start = this.currentPage * this.pageSize;
    this.data = Array.from({ length: this.pageSize }, (_, i) => `Item ${start + i + 1}`);
  }

  onPageChange(event: PageEvent) {
    this.pageSize = event.pageSize;
    this.currentPage = event.pageIndex;
    this.loadData();
  }
}

步骤 6： 打开 app.css 并为分页器添加 margin，使其看起来更好 −

app.css

mat-paginator {
    margin-top: 20px;
}

输出

步骤 7： 最后，使用以下命令运行应用 −

ng serve

运行后，分页器将显示如下所示 −

笙亿网络策划

Angular Paginator怎么用？分页器组件如何在Angular中实现分页功能？