How to paginate to previous page using AngularFire, Firestore and Firebase
So I think I solved it by a comment inspired by the github issue mentioned above:
Supposing you have this array and you are sorting ascending
A,
B,
C,
D,
E,
F,
And you have a page limnit of 2 results
Then when you are in the third page you should have
E,
F
Now you need to go to previous page and what you need todo is:
- Reverse the sorting order and our data should be
[F,E,D,C,B,A]
- startAfter the first document of the currently viewed page (in our case E)
- Query the firestore to get the results (eg with your limit of 2). You should get with reverse order and starting after
E
and that is[D,C]
- Reverse the above array so it will be
[C,D]
- Done
As of [email protected]
you can use the Query.limitToLast(n: number)
method - makes it much easier to move backward with paginated data.
Your implementation details might look something like this:
function nextPage(last) {
return ref.orderBy('age').startAfter(last.age).limit(3);
}
function prevPage(first) {
return ref.orderBy('age').endBefore(first.age).limitToLast(3);
}