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"
           >

Richelle

Can you create a StackBlitz please or share more code ? – Kaseykasha

@Kaseykasha 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. – Richelle

How many elements do you have in your case right now ? – Kaseykasha

did my answer below solved your issue? Any feedback would be appreciated – Speedwriting

Answer 1

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());

Crites

thank you very much! this helps me to change the p-table pages programmatically :) – Aaronaaronic

Answer 2

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)

Kaseykasha

Answer 3

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

Speedwriting

Answer 4

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);
 }

Conquian