web-dev-qa-db-fra.com

Pagination côté serveur PrimeNG DataTable

Je travaille actuellement sur un projet Angular 4 et j'utilise le DataTable de PrimeNG. Jusqu’à présent, ce cadre me semble assez soigné, mais j’aimerais faire de la pagination mon côté serveur. De cette façon, je ne chargerai que 10,20, .. enregistrements à la fois plutôt que de charger tous les 1000+ à la fois ..

Quelqu'un l'a-t-il déjà fait ou connaît-il une solution à ce problème?

PS: Si vous n'avez pas de solution mais que vous connaissez un framework qui le supporte, faites le moi savoir!

angularprimengprimeng-datatable
4
Jonathan De Badrihaye

On dirait que Lazy est ce que nous ... cherchons:) https://www.primefaces.org/primeng/#/datatable/lazy

7
Pablo

Avec l'aide de Lazy Loading, nous pouvons implémenter la pagination, le filtrage et le tri côté serveur sur la table de données.

Voici le code: 

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

Vous pouvez écouter l'événement onPageChange du paginateur pour vous dire quand vous devez obtenir paginator.rows de données.

1
BillF

Pour votre information, p-dataTable est obsolète dans la version 6. PrimeFaces vous suggère d'utiliser TurboTable. Je devais juste passer par la conversion. Vous devrez ajouter [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>

Remarque: les classes nsg-CSS sont mes classes personnalisées.

0
P. Huhn