Firestore Pagination - Previous

Question

I am new to firebase and a I am trying the pagination query. I like to have a 'Next' and 'Previous' buttons. My next button is working fine, my issue is when clicking Previous

Reference: https://firebase.google.com/docs/firestore/query-data/query-cursors

Currently, I have 10 documents on my collection and I like to display 3 at a time.

On load I display 3 items only

       var first = db.collection("employees").limit(3);
        first.get().then(function (documentSnapshots) {
        documentSnapshots.docs.forEach(doc => {
            //function to display in the HTML
            renderEmployee(doc);
        });
        lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
    });

Next Button

$("#js-next").on('click', function () {
        $('#employee-table tbody').html('');
        var next = db.collection("employees")
            .startAfter(lastVisible)
            .limit(3);
        next.get().then(function (documentSnapshots) {
            documentSnapshots.docs.forEach(doc => {
                //function to display in the HTML
                renderEmployee(doc);
            });
            lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
firstVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
        });
    });

Previous (CODE PROBLEM)

    $("#js-previous").on('click', function () {
        $('#employee-table tbody').html('');
        var previous = db.collection("employees")
            .startAt(firstVisible)
            .limit(3);
        previous.get().then(function (documentSnapshots) {
            documentSnapshots.docs.forEach(doc => {
                renderEmployee(doc);
            });
        });
    });

I am using the variable firstVisible at startAt and I am setting its value when clicking the next button but clicking it does not work as expected.

To be honest I am not sure what I need to set on the firstVisible variable to get the previous document snapshot

Any help will be appreciated

Answer 1

Firestore pagination is based on knowing the anchor document: the document that the two pages involved are anchored on.

Usually this would be the last document of the current page, which is also the first document of the next page. Or actually if you'd use startAfter() it'd be the document just before the next page.

But since you're paginating backwards, the anchor document is the first document on the current page, which is also the last document on the previous page. This means you'll need to:

1. Reverse the sort order of the query.
2. Start at (or after) the anchor document.

So something like:

var previous = db.collection("employees")
    .orderBy(firebase.firestore.FieldPath.documentId(), "desc")
    .startAt(firstVisible)
    .limit(3);

Answer 2

Change startAt to endBefore:

$("#js-previous").on('click', function () {
    $('#employee-table tbody').html('');
    var previous = db.collection("employees")
        .endBefore(firstVisible)
        .limit(3);
    previous.get().then(function (documentSnapshots) {
        documentSnapshots.docs.forEach(doc => {
            renderEmployee(doc);
        });
    });
});