web-dev-qa-db-ja.com

PrimeNG DataTableサーバー側ページング

私は現在Angular 4プロジェクトでPrimeNG DataTableを使用しています。これまでのところ、このフレームワークはきれいに見えますが、ページングをサーバー側にしたいと思います。その方法でロードします1000以上すべてを一度にロードするのではなく、一度に10,20、..レコードのみ。

これまでに誰かがこれを行ったことがありますか、またはこれに対する解決策を知っている人はいますか？

PS：解決策はありませんが、これをサポートするフレームワークを知っている場合は、お知らせください！

angularprimengprimeng-datatable
4
Jonathan De Badrihaye

レイジーは私たちが何をしているのか...のように見えます:) https://www.primefaces.org/primeng/#/datatable/lazy

7
Pablo

遅延読み込みの助けを借りて、サーバー側のページング、フィルタリング、データテーブルの並べ替えを実装できます。

ここにコードがあります：

listing.html
<div class="table-responsive">
        <p-dataTable sortField="FileNo" [sortOrder]="1" [value]="paitientListing" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20]" [totalRecords]="totalRecords" (onLazyLoad)="loadPatientListing($event)">
            <p-column field="PatientID" header="File No" [sortable]="true" [style]="{'width':'94px'}"></p-column>
            <p-column field="LastName" [sortable]="true" [style]="{'width':'121px'}" header="Last Name"></p-column>
            <p-column field="FirstName" [sortable]="true" [style]="{'width':'122px'}" header="First Name"></p-column>
            <p-column styleClass="col-button" [style]="{'width':'90px'}">
                <ng-template pTemplate="header">
                    Action
                </ng-template>
                <ng-template let-paitientListing="rowData" pTemplate="body">
                    <button type="button" pButton (click)="editPatient(paitientListing.PatientID)" icon="fa-pencil-square-o"></button>
                    <button type="button" pButton (click)="deletePatient(paitientListing.PatientID)" icon="fa-trash-o" class="ui-button-danger"></button>
                </ng-template>
            </p-column>
        </p-dataTable> 
listing.Component.ts

loadPatientListing(event) {
    this.patientFilterModel.PageSize = event.rows;
    this.patientFilterModel.RowNumber = event.first;
    this.patientFilterModel.OrderColumn = event.sortField;

    if (event.sortOrder == 1) {
        this.patientFilterModel.OrderBy = "asc";
    }
    else {
        this.patientFilterModel.OrderBy = "desc";
    }
    this.patientService.GetPatientListing(this.patientFilterModel).subscribe(
        data => {
            this.patientModel = data;
            this.paitientListing = this.patientModel._ListPatientListing;
            this.totalRecords = data.TotalRecords;
        },
        error => {
            this.loading = false;
        }
    );
}
3
Jyoti

PaginatorのonPageChangeイベントをリッスンして、paginator.rowsのデータを取得する必要があることを通知できます。

1
BillF

ちなみに、p-dataTableはバージョン6で廃止されました。PrimeFacesはTurboTableの使用を推奨しています。私はただ改宗しなければなりませんでした。 [totalRecords] = 'totalRecords' [lazy] = 'true'（onLazyLoad）= 'loadPatientLazy（$ event）' [loading] = 'loading'を追加する必要があります

<p-table id='patients-grid' [value]='patients' [totalRecords]='totalRecords'
        expandableRows='true' [responsive]='true' dataKey=''
        [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>
    <ng-template pTemplate='header'>
        <tr>
            <th style='width: 40px;'></th>
            <th style='width: 40px;'>
                <button (click)='addItemClicked( )' pButton type='button' icon='fa fa-plus' class='ui-button-primary'></button>
            </th>
            <th style='width: 80px;' [pSortableColumn]='"PatientID"'>
                Patient I D
                <p-sortIcon [field]='PatientID'></p-sortIcon>
            </th>
            <th style='width: 250px;' [pSortableColumn]='"LastName"'>
                Last Name
                <p-sortIcon [field]='LastName'></p-sortIcon>
            </th>
            <th style='width: 250px;' [pSortableColumn]='"FirstName"'>
                First Name
                <p-sortIcon [field]='FirstName'></p-sortIcon>
            </th>
            <th style='width: 40px;'></th>
        </tr>
    </ng-template>
    <ng-template pTemplate='body' let-rowData let-columns='columns' let-expanded='expanded'>
        <tr>
            <td>
                <a href='#' [pRowToggler]='rowData'>
                    <i [ngClass]='expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-pw pi-chevron-circle-right"' style='font-size: 1.25em'></i>
                </a>
            </td>
            <td>
                <button (click)='editItemClicked( rowData )' pButton type='button' icon='fa fa-edit' class='ui-button-primary'></button>
            </td>
            <td>{{rowData['PatientID']}}</td>
            <td>{{rowData['LastName']}}</td>
            <td>{{rowData['FirstName']}}</td>
            <td>
                <button (click)="deleteItemClicked( patient )" pButton type="button" icon="fa fa-trash" class="ui-button-danger"></button>
            </td>
        </tr>
    </ng-template>
    <ng-template let-patient pTemplate='rowexpansion'>
        <tr><td [attr.colspan]='6'>
            <div class='ui-grid ui-grid-responsive ui-fluid'>
                <div class='ui-grid-row ui-inputgroup'>
                    <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='PatientID'>Patient I D:&nbsp;</label></div>
                    <div class='ui-grid-col-9' id='PatientID'>{{patient.PatientID}}</div>
                </div>
                <div class='ui-grid-row ui-inputgroup'>
                    <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='LastName'>Last Name:&nbsp;</label></div>
                    <div class='ui-grid-col-9' id='LastName'>{{patient.LastName}}</div>
                </div>
                <div class='ui-grid-row ui-inputgroup'>
                    <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='FirstName'>First Name:&nbsp;</label></div>
                    <div class='ui-grid-col-9' id='FirstName'>{{patient.FirstName}}</div>
                </div>
            </div>
        </td><tr>
    </ng-template>
</p-table>

注：nsg- CSSクラスは私のカスタムクラスです。

0
P. Huhn

古いバージョンの情報を使用している人のために https://www.primefaces.org/primeng-4.3.0/#/datatable で入手できます。

loadData(event: LazyLoadEvent) {
    //event.first = First row offset
    //event.rows = Number of rows per page
    //event.sortField = Field name to sort in single sort mode
    //event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
    //multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
    //filters: Filters object having field as key and filter value, filter matchMode as value
    //globalFilter: Value of the global filter if available
    this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
}
0
Ankit