How to paginate PrimeNG DataView dynamically?

Question

I want to go to some specific page when I have selected the Item in that field. I have tried the following way

import {DataViewModule, DataView} from 'primeng/dataview';

// ...

@ViewChild('dataview') dataTable: DataView;

// ...

if (this.selectIndustry) {
            const indxOfIndustry = industries.indexOf(this.selectedIndustry);
            const pageNo = (indxOfIndustry / 10) + 1;
            const paging = {
                first: ((pageNo - 1) * 10),
                rows: 10
            };
            this.dataTable.paginate(paging);
        }

But I am getting error message like undefined dataView

the code snippet which you posted is not adequate to pin-point the issue. Could you post your component's .ts and .html code? — Nitin Avula, Aug 27 '19 at 13:24

score 0 · Answer 1 · answered Nov 10 '22 at 09:50

all you have to do is access the selector of the dataView as 'any'

in your HTML file

<p-dataView #dataviewHtml>
...
</p-dataView>

in your TS file


// ...

export class AnyComponent implements OnInit {
  @ViewChild('dataviewHtml') dataView: any;

// ...

then you can adjust your dataView Paginator anywhere in your TS but not in your ngOnInit, you can use it anywhere afterViewInit

I used it to go back to the first page of paginator dynamically

this.dataView.first = 0;

you can console log the whole Data View Element to see what you're working with

console.log('DATA VIEW ', this.dataView);

How to paginate PrimeNG DataView dynamically?

1 Answers1