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?