Set page selection to the last page of PrimeNG p-table

Question

I need to have the selected page of my p-table to be the last page.

I am able to get my table object:

@ViewChild('myTable') myTable: DataTable;

ngOnInit() {

    this.subService.subsUpdated.subscribe(result => {
      this.fetchSubcontracts();
    });

    this.appForm.subAdded.subscribe(result => {
      this.added = 4;
      this.fetchSubs();
    });

  }

I tried binding the [first] and [paginatorPosition] properties on my p-table to a property but that didn't work.

<p-table #myTable
           [value]="subs"
           sortMode="multiple"
           selectionMode="single"
           (onRowSelect)="onRowSelect($event)"
           (onRowUnselect)="onRowUnselect($event)"
           [(selection)]="selectedSub"
           [columns]="columns"
           dataKey="id"
           [paginator]="subs.length > 0"
           [rows]="5"
           [first]="added"
           >

@Antikhippe I at least added in my table config info for the html and where I try to set the page. I didn't know how to get the last page of my table either. — Drew13, Aug 10 '18 at 19:58
did my answer below solved your issue? Any feedback would be appreciated — Andriy, Aug 25 '18 at 19:14

score 3 · Answer 1 · edited Nov 27 '19 at 09:22

3

This worked for me :

@ViewChild('dt', { static: false }) table: Table;

this.table.first = Math.floor(this.table.totalRecords / this.table.rows) * this.table.rows;
this.table.firstChange.emit(this.table.first);
this.table.onLazyLoad.emit(this.table.createLazyLoadMetadata());

edited Nov 27 '19 at 09:22

Pascal Bayer

2,615
8
33
51

answered Nov 27 '19 at 08:27

r_piramoon

141
1
6

thank you very much! this helps me to change the p-table pages programmatically :) – coder Jan 04 '21 at 09:31

score 2 · Answer 2 · answered Aug 10 '18 at 20:43

first property is the index of the first row to be displayed not the index of the first page to be displayed.

In your table properties, you have set 5 rows per page so if added equals 4, you will always stay on the first page which contains the 4th row.

So added should be something like Math.floor(this.subs.length/5)

score 1 · Answer 3 · answered Aug 10 '18 at 20:35

try to use onPageChange() function:

this.appForm.subAdded.subscribe(result => {
  // number of pages in the table
  const pageCount = Math.ceil(this.myTable.totalRecords / this.myTable.rows);
  // last page
  const page = pageCount - 1;
  this.myTable.onPageChange({
    pageCount,
    page,
    first: page * this.myTable.rows,
    rows: this.myTable.rows
  });
  this.fetchSubs();
});

instead of

this.myTable.totalRecords

you could also use

this.subs.length

you can also remove [first]="added" from your HTML

score 0 · Answer 4 · answered Feb 19 '23 at 14:52

Setting the "first" on p-table is notorious. It doesn't work all the time. What I've found is that, when you do it the ugly way, it works! Like so:

@ViewChild('table', { static: true }) table!: Table;

 goToPage(page: number): void {
   setTimeout(() => {
     this.table.first = (page - 1) * this.pageSize;
     this.table.firstChange.emit(this.table.first);
   }, 0);
 }

Set page selection to the last page of PrimeNG p-table

4 Answers4