Angular 6 primeng p-dataView paginator only generating page 1

user_3029612 0
Viewed 2635

So straight to the point, my p-dataView component looks pretty much like the one straight from the primefaces.org tutorial.

<p-dataView #dv [value]="routes" [paginator]='true' [rows]="5" totalRecords="{{totalRecords}}" pageLinkSize="3" paginatorPosition="both">
    <p-header>
        <div class="ui-helper-clearfix">
            <div class="ui-g">
                <div class="ui-g-6 ui-md-4" style="text-align:right">
                    <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
                </div>
            </div>
        </div>
    </p-header>
    <ng-template let-route pTemplate="listItem">
        <div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
            <div class="ui-g-12 ui-md-3" style="text-align:center">
                <img [src]="'data:image/png;base64,'+route.thumbnail" alt=""/>
            </div>
            <div class="ui-g-12 ui-md-8 route-details">
                <div class="ui-g">
                    <div class="ui-g-2 ui-sm-6">Name: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.name}}</b></div>

                    <div class="ui-g-2 ui-sm-6">Lenght: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.length}}</b></div>

                    <div class="ui-g-2 ui-sm-6">RecordTime: </div>
                    <div class="ui-g-10 ui-sm-6"><b>{{route.recordTime}}</b></div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-route pTemplate="gridItem">
        <div style="padding:.5em" class="ui-g-12 ui-md-3">
            <p-panel [header]="route.name" [style]="{'text-align':'center'}">
                <div class="route-detail">{{route.length}} - {{route.recordTime}}</div>
                <hr class="ui-widget-content" style="border-top:0">
                <button pButton type="button" icon="fa-search" (click)="selectRoute($event, route)" style="margin-top:0"></button>
            </p-panel>
        </div>
    </ng-template>
</p-dataView>

and my typescript file

@Input('routes') routes: Route[];
@Input('totalRecords') totalRecords: Number;

displayDialog: boolean;

public selectedRoute: Route;

constructor() { }

ngOnInit() { }

onDialogHide() {
    this.selectedRoute = null;
}

selectRoute(event: Event, route: Route) {
    this.selectedRoute = route;
    this.displayDialog = true;
    console.log("Selected route: " + this.selectedRoute);
    event.preventDefault();
}

I then use this component elsewhere and I populate the data after I do and API call to the server which then returns data that I populate inside the p-dataView. The paginator is set for true and it displays but it's always page 1. Server returns 10 routes (data) and p-dataView display 5 of them (as set with rows) but the paginator stays only 1 paged. Do I need to implement some kind of logic to do so or is this just some bug? I also dosen't have the look it has on primefaces so it might be something wrong with my project. I created the project using Angular CLI. I also tried to make another project with just p-dataView and paginator still didn't work. This is what it looks like:

enter image description here

UPDATE: I call app-routelister (which is my component that has p-dataView) like that with all parameters. "routes" is array of 10 routes and totalRecords is manually set to 100.

<div>
  <app-routelister [routes]="routes" [totalRecords]="totalRecords"></app-routelister>
</div>
angular6 primeng angular
2 Answers

@user3029612 please make changes in p-dataView and check your totalRecords value and if it's more than 1 it will display your paginator

<p-dataView #dv [value]="routes" [paginator]='true' [rows]="5" 
        [totalRecords]="totalRecords" pageLinkSize="3" 
        paginatorPosition="both">
      </p-dataView>
user_46822660

I just came accross the same problem. I finally found the solution in the documentation of primeng. Have a look at https://www.primefaces.org/primeng/#/dataview and scroll down to section Lazy Loading.

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging happens. [...] It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.

So regardless of that you are doing real lazy loading or not you have to set the lazy-property to true:

<p-dataView #dv [value]="routes" [paginator]="true" [lazy]="true" [rows]="5" [totalRecords]="totalRecords" pageLinkSize="3" paginatorPosition="both">
   <!-- [...] -->
</p-dataView>
user_83985260
Related