javascript - Firestore 分页 - 以前

Question

我是 firebase 的新手，我正在尝试分页查询。我喜欢有一个“下一个”和“上一个”按钮。我的下一个按钮工作正常，我的问题是单击上一个

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

目前，我的收藏中有 10 个文档，我希望一次显示 3 个。

加载时我只显示 3 个项目

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

下一步按钮

$("#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];
        });
    });

上一个(代码问题)

    $("#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);
            });
        });
    });

我在 startAt 处使用了变量 firstVisible，我在单击下一步按钮时设置了它的值，但单击它没有按预期工作。

老实说，我不确定我需要在 firstVisible 变量上设置什么来获取以前的文档快照

任何帮助将不胜感激

Answer 1

$("#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);
        });
    });
});

尝试将 endBefore 与 limitToLast 一起使用。 limitToLast 将返回第一个可见文档之前的最后一个文档。希望对您有所帮助!