How to use lazy loading + sort in p-Table using angular2

1
votes

i have used lazy loading in my application and also i want to use the sorting of the items. If i don't use lazy loading it works fine, but i want the application to work in both lazy loading and sorting. Can anyone help me to solve this.

DEMO:

https://stackblitz.com/edit/angular-ya2md7?file=src%2Fapp%2Fapp.component.html

2
angulartypescriptprimengprimeng-datatable
Thats stackblitz is sorted so what is the problem? - Antoniossss
@Antoniossss: No that is not sorted, if i remove lazy load and click on header, then the data gets sorted, as in this primefaces.org/primeng/#/table/sort - Bhrungarajni

2 Answers

2
votes

You cannot sort elements that does not exists. Either load everything, sort and then display, or let your backend serve sorted and paginated data for lazy loading.

Thats how it normally works (letter option)

0
votes

The LazyLoadEvent that is fired by the grid (When pagination is on) holds properties for the requested column to sort by. As long as you add the pSortableColumn attribute to the th tags.

I think the direction property is also there with a value of -1 or +1 value. So you can pick these values up as part of the LazyLoadEvent handler and pass it to your backend (You just interpret what you get from the event into what your back end needs). I have to convert -1 into 'DESC' for Descending.