如何获取仅在分页的材料数据表页面中显示的数据 [英] How to get the data which is shown only in the page of material datatable with pagination

问题描述

我需要将页面上当前显示的数据导出为 excel 或 pdf.那么我怎么能得到只显示在页面上的数据.我将整个数据存储在数据源对象中.例如:- 如果每页的项目是 10 ，我需要 10 项目.如果我将分页器项目列表更改为 20 ，那么我需要 20 个项目.

I need to export data which is displayed currently on the page to excel or pdf. So how could I get the data which is only displayed on the page. I am storing the whole data in datasource object. eg:- If items per page is 10 , I need the 10 items. If I change the paginator Item list to 20 ,then I need the 20 Items.

组件 HTML

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

component.ts

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;    

这是我的组件文件.

推荐答案

您可以使用以下代码跳过几条记录并过滤或获取当前页面记录:

You can use below code to skip few records and filter or take the current page records:

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

Created a working demo here: https://stackblitz.com/edit/angular-n9yojx

这篇关于如何获取仅在分页的材料数据表页面中显示的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！