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

【问题标题】：How to get the data which is shown only in the page of material datatable with pagination如何通过分页获取仅在材料数据表页面中显示的数据
【发布时间】：2019-03-16 13:43:19
【问题描述】：

我需要将页面上当前显示的数据导出为 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>

组件.ts

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

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

这是我的组件文件。

【问题讨论】：

您的问题不清楚。有什么问题？
我需要将页面上当前显示的数据导出为excel或pdf。如何获取datatable显示的数据。
实际数据位于this.reports 旁边。
@NasiruddinSaiyed - 我不需要全部数据。我需要页面上显示的数据。如果每页的项目是 10 ，我需要 10 个项目。如果我将分页器项目列表更改为 20 ，那么我需要 20 个项目。

标签： angular datatable pagination angular-material angular6

【解决方案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);

将使其适用于所有情况

【讨论】：

【解决方案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

【讨论】：