时间戳

首页 > 解决方案 > 如何通过分页获取仅在材料数据表页面中显示的数据

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

问题描述

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

这是我的组件文件。

标签： angulardatatablepaginationangular-materialangular6

解决方案

如果您不对数据进行排序和过滤，@User3250 的答案很好。如果您的数据经过排序或过滤，它仍会提取未排序或过滤的元素。

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

将使其在所有情况下都有效

推荐阅读