web-dev-qa-db-ja.com

PrimeNGのCSVへのエクスポート

私は_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レコードすべてをエクスポートする方法はありますか？

angularprimengprimeng-datatable
5
Rasmi

直接的な解決策はなく、誰かに役立つことを期待して解決策を共有します。

私の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 => {
        },
    );
}
5
Rasmi

変更するだけです：

[rows]="10"

あなたが望む任意の値に。

お気に入り ：

[rows]="50"

これを動的に変更することもできます。

0
Sawant Sharma

別の方法は、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>
0
Mehmet Oz