I have a PrimeNG grid
and the data served by the PrimeNG
is from a service which have server side paginated data and from the server we would receive only our current page record.
I have my HTML
code as below:
<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
variable will only have 10 records (my page size), but we want to export all the data from the server. Let say I have 5 page, I would like to export all the 50 records.
dataTable.exportCSV()
is only exporting my current page 10 record only. Is there any way to export all the 50 records?
There no direct solution, sharing a solution hoping that it might help someone.
My HTML looks like this.
<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>
my typescript looks like this.
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 => {
},
);
}