Angular PrimeNG sort and pagination programmatically
Asked Answered
T

0

7

In my angular 5 project I have a PrimeNG table and I want to load pagination params form the url, for example: http://.... tickets?first=10&sortField=exitDate&sortOrder=1

The problem is that when I refresh the page I don't see the correct sortIcon and the correct paginator.

In the component.ts onInit I load all the params from url in an array:

this.route.queryParams.subscribe((params: Params) => {
    for (const param in params) {
        filters.push({ property: param, value: params[param] })
       }
     this.preloadFilterFields(filters)
    })

And then I put the parameters in the event

  preloadFilterFields(filters: Filter[]) {
    for (const filter of filters) {
      if (filter.property === 'first') {
        this.event.first = filter.value;
      } else if (filter.property === 'sortField') {
        this.event.sortField = filter.value;
      } else if (filter.property === 'sortOrder') {
        this.event.sortOrder = filter.value;
      }
    }
  }

This is the table.html

<p-table [value]="ticketList" [lazy]="true" (onLazyLoad)="loadModelData($event)" [paginator]="true" 
[totalRecords]="totalElements" 
[rows]="10" [responsive]="true" 
[loading]="loader" dataKey="createdDate" [sortField]="event.sortField"
[sortOrder]="event.sortOrder">

The event is initialized like this and first time I load the table I see the correct pagination and sorting:

event: LazyLoadEvent = { sortOrder: -1, sortField: 'createdDate' };

But when I change pagination like event.sortOrder and try to refresh the page I see the correct event but I don't see the correct sorticon/ paginator

============================UPDATE============================== https://stackblitz.com/edit/angular-4qz1ye?file=app%2Fapp.component.ts I need to reorder this table with a param from the code programmatically (not clicking into the table) Is it possible?

Telephone answered 4/4, 2018 at 13:8 Comment(2)
See #45594695Caird
I know this is old but by any change did you happen to find an answer and still remember it? All we have here is link to another stackoverflow thread that is completely different situation and has an accepted answer that doesn't answer this question at all.Ninetta

© 2022 - 2024 — McMap. All rights reserved.