te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Firestore Pagination - Previous - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Firestore Pagination - Previous - Stack Overflow

    javascript - Firestore Pagination - Previous - Stack Overflow

    programmeradmin3浏览0评论

    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:

    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

    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./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

    • javascript
    • firebase
    • google-cloud-firestore
    Share Improve this question edited Aug 27, 2019 at 12:19 Doug Stevenson 318k36 gold badges454 silver badges472 bronze badges asked Aug 27, 2019 at 11:53 DaveDave 3033 silver badges20 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 12 
    $("#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!

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

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论