PrimeNG 导出为 CSV

Question

我有一个 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条记录吗？

Answer 1

只需更改：

[rows]="10"

任意值。

喜欢：

[rows]="50"

您也可以动态更改它。

Answer 2

没有直接的解决方法，分享一个解决方法希望对大家有帮助。

我的 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>

我的打字稿是这样的。

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 => {
        },
    );
}

Answer 3

另一种方法是暂时禁用分页器：

<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>

Answer 4

您可以在第一次加载组件时额外调用 loadAllData() 并将数据存储在 JsonArrayAll[] 中，并将分页数据保存在 JsonArray[] 中。

<p-table #dt [columns]="cols" [value]="JsonArray" [paginator]="true" rows="10">TABLE</p-table>
<button (click)="dt.value=JsonArrayAll;dt.exportCSV();dt.value=JsonArray;">

PrimeNG 导出为 CSV

PrimeNG export to CSV

angular

primeng

primeng-datatable