代码之家 › 专栏 › 技术社区 › Rasmi

启动导出到CSV

primeng-datatable primeng angular

Rasmi · 技术社区 · 7 年前

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

4 回复 | 直到 7 年前

Rasmi 7 年前

没有直接的解决方案,分享一个解决方案,希望它能帮助别人。

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

Mehmet Oz 6 年前

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

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

VikasRoy 4 年前

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

-1

mane 7 年前

只需更改:

[rows]="10"

任何你想要的价值。

例如:

[rows]="50"