私は_PrimeNG grid
_を持っており、PrimeNG
によって提供されるデータは、サーバー側のページ付けされたデータを持つサービスからのものであり、サーバーからは現在のページレコードのみを受け取ります。
HTML
コードは次のとおりです。
_ <p-dataTable *ngIf="displayTable" #dataTable [value]="JSONArray"
[lazy]="true" [responsive]="true" [rows]="10"
[paginator]="true" selectionMode="single"
[(selection)]="selectedEvent"
(onRowSelect)="onRowSelect($event)"
[pageLinks]="5" [(first)] = "first"
class="ui-datatable-scrollable-wrapper view-table"
[totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
<p-header>
<div class="ui-helper-clearfix">
<button type="button" pButton icon="fa-file-o" iconPos="left"
label="CSV" (click)="dataTable.exportCSV()" style="float:left">
</button>
</div>
</p-header>
<p-column field="col1" header="Column 1"></p-column>
<p-column field="col2" header="Column 2"></p-column>
<p-footer>
<div>
</div>
</p-footer>
</p-dataTable>
_
JSONArray
変数には10レコード(私のページサイズ)しかありませんが、サーバーからすべてのデータをエクスポートしたいと思います。 5ページあるとしましょう。50レコードすべてをエクスポートしたいと思います。
dataTable.exportCSV()
は、現在のページ10レコードのみをエクスポートしています。 50レコードすべてをエクスポートする方法はありますか?
直接的な解決策はなく、誰かに役立つことを期待して解決策を共有します。
私のHTMLは次のようになります。
<p-dataTable *ngIf="displayTable" #dataTable [value]="JSONArray"
[lazy]="true" [responsive]="true" [rows]="rowCount"
[paginator]="true" selectionMode="single"
[(selection)]="selectedEvent"
(onRowSelect)="onRowSelect($event)"
[pageLinks]="5" [(first)] = "first"
class="ui-datatable-scrollable-wrapper view-table"
[totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
<p-header>
<div class="ui-helper-clearfix">
<button type="button" pButton icon="fa-file-o" iconPos="left"
label="CSV" (click)="exportCSV(dataTable)" style="float:left">
</button>
</div>
</p-header>
<p-column field="col1" header="Column 1"></p-column>
<p-column field="col2" header="Column 2"></p-column>
<p-footer>
<div>
</div>
</p-footer>
</p-dataTable>
私のTypeScriptは次のようになります。
private _dataTable: any;
private rowCount: Number;
private pageNoSize: any;
exportCSV(dataTable) {
this.rowCount = 50;
this.pageNoSize = 'page=0&size=' + this.rowCount;
this._dataTable = dataTable;
this.getJSONData();
}
getJSONData() {
this.getJSONDataService.get(uri + this.pageNoSize)
.subscribe(
data => {
this._dataTable.value = data;
this._dataTable.exportCSV();
this.rowCount = 10;
},
error => {
},
);
}
変更するだけです:
[rows]="10"
あなたが望む任意の値に。
お気に入り :
[rows]="50"
これを動的に変更することもできます。
別の方法は、paginatorを一時的に無効にすることです。
<p-table #yourTable [columns]="cols" [paginator]="true" rows="10">TABLE CONTENT</p-table>
ボタンのエクスポートイベントの場合:
<button type="button" pButton (click)="yourTable.paginator=false;yourTable.exportCSV();yourTable.paginator=true;" label="Export"></button>