Question

我需要将当前显示在页面上的数据导出为excel或pdf。因此，如何获取仅显示在页面上的数据。我将整个数据存储在数据源对象中。例如：-如果每页项目为10，我需要10项。如果我将分页器的项目列表更改为20，则需要20个项目。

组件HTML

   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>

component.ts

   import {MatPaginator, MatSort, MatTableDataSource} from 
  '@angular/material';

   this.dataSource = new MatTableDataSource(this.reports);
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;

这是我的组件文件。

Answer 1

如果您不对数据进行排序和过滤，则

@ User3250的答案很好。如果您的数据已排序或过滤，它仍会提取未显示的元素。

this.dataSource.sortData(this.dataSource.filteredData, this.dataSource.sort).filter((u, i) => i >= skip)
    .filter((u: AlerteRow, i: number) => i < this.paginator.pageSize);

将使其在所有情况下均可工作

Answer 2

您可以使用以下代码跳过一些记录并过滤或获取当前页面记录：

const skip = this.paginator.pageSize * this.paginator.pageIndex;

const pagedData = this.data.filter((u, i) => i >= skip)
   .filter((u, i) => i <this.paginator.pageSize);

在此处创建了一个有效的演示：https://stackblitz.com/edit/angular-n9yojx

如何获取仅在材料数据表的页面中显示的分页数据

2 个答案: