0

In NgPrime turbo table ,i have edit function. After saving the data in server am reloading the grid. But cant able to retain the current page.How can i set the page number to the grid? I found a way to get the current page number using this function

 paginate(event) { 
let pageIndex = event.first/event.rows + 1;
 }

and by adding the this attribute to table tag (onPage)="paginate($event)". How can i set the page number to the grid?

Thanveer
  • 31
  • 2
  • 8

2 Answers2

2

It looks like rather than having direct control over the page number, per se, you have control over the first row displayed:

<p-table [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" [first]="first">

In the above case, with 10 rows per page, you'd set first to 0 to get to the first page, 10 for the second page, 20 for the third page, etc.

Update:

Since the above didn't work for changing the page after the fact (perhaps it only works for the initial set-up of the table), you could try something like the following, which works for the now-deprecated DataTable:

In the HTML:

<p-table #myTable [columns]="cols" [value]="cars" [paginator]="true" [rows]="10">

Then, in your component:

@ViewChild('myTable') myTable: TurboTable;
    ...
this.myTable.first = desiredFirstRow;

I'll take this as an occasion to update my old table code to TurboTable, and I'll know soon enough if this works for sure.

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • This solution is not working for me @kshetline, Even after changing the `first` value to 10, the page refreshes to first page – Thanveer Mar 19 '18 at 07:43
  • I updated the above answer with something that might help, based on the opposite problem I was having with the old `DataTable` -- it would refresh to an old page number when I really wanted it to go to the first (zeroeth) page. – kshetline Mar 19 '18 at 07:56
0

@kshetline answer did work for me.
HTML

<p-table #dt [columns]="columnHeaders" [value]="batchList" [lazy]="true" (onLazyLoad)="lazyLoadNextBatch($event)" [paginator]="true" [rows]="recordsPerPageCount?.value" [totalRecords]="totalRecords" [responsive]="true">

TypeScript

onRecordsPerPageCountChange() {
    this.totalRecords = 0;
    this.pageNavLinks = 0;
    this.myTable.first = 0; // <-- this did the work.
    this.lazyLoadNextBatch({ 'first': 0 });
}
lazyLoadNextBatch(event: LazyLoadEvent) {
    // calculate the page number from event.first
    this.loading = true;
    const pageNumber = Math.round(event.first / this.recordsPerPageCount.value) + 1;
    this.bmService.getBatchList(this.batchListStatus, pageNumber, this.recordsPerPageCount.value)
        .subscribe(response => {
            this.batchList = response.batches;
            // totalRecords is used to find the navigation links
            this.totalRecords = response.batches[0].TotalRowCount;
            this.pageNavLinks = Math.round(this.totalRecords / this.recordsPerPageCount.value);
            this.loading = false;
        });
}
Extreme
  • 2,919
  • 1
  • 17
  • 27