CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Dave
Dave

Reputation: 303

Firestore Pagination - Previous

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

Upvotes: 8

Views: 4969

Answers (3)

Miriam
Miriam

Reputation: 367

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);
        });
    });
});

Upvotes: 1

Danh Nguyen
Danh Nguyen

Reputation: 318

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

Try to use endBefore with limitToLast. limitToLast will return the last documents right before the first visible document. Hope this help!

Upvotes: 12

Frank van Puffelen
Frank van Puffelen

Reputation: 600036

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);

Upvotes: 1

Related Questions