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

没有直接的解决方案，共享解决方案，希望它可以帮助某人。

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

只需改变：

[rows]="10"

你想要的任何价值。

喜欢：

[rows]="50"

您也可以动态更改此内容。

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

4 个答案: