Блог

Главная - Вопросы по программированию - Разбивка на страницы Firestore: как мне загрузить следующий набор данных с помощью Javascript

Разбивка на страницы Firestore: как мне загрузить следующий набор данных с помощью Javascript

#javascript #firebase #google-cloud-platform #google-cloud-firestore

#javascript #firebase #google-облачная платформа #google-cloud-firestore

Вопрос:

вот мой код для загрузки первых 100 документов в коллекции:

 db.collection("books").where("ItemType", "==", "Book").limit(100)
        .get()
        .then(querySnapshot=>{
                querySnapshot.forEach(doc=>{
                    console.log(doc.data())
                    let data = doc.data();
                    let row  = `<tr>
                                    <td>${data.Title}</td>
                                   
                            </tr>`;
                    let table = document.getElementById('myTable')
                    table.innerHTML  = row
                })
            })
            .catch(err=>{
                console.log(`Error: ${err}`)
            });

Как мне продолжать загружать следующие 100 документов одним нажатием кнопки?

 function LoadMore(){
    //Load 100 more documents
}

Ответ №1:

Вы можете использовать startAt(doc) или startAfter(doc) . Просто укажите значения полей или DocumentSnapshot документа из вашего последнего запроса.

В вашем случае это было бы:

 db.collection("books").where("ItemType", "==", "Book")
.startAfter(lastDocFromFirstQuery).limit(100).get();

Ответ на ваш отредактированный вопрос

 // define this somewhere globally
let lastDoc;

// use just this function
function queryBooks() {
  let query;

  // if lastDoc is already defined then use it as a reference point for firestore
  if (lastDoc != null) {
    query = fsDb.collection("books").where("ItemType", "==", "Book").startAfter(lastDoc);
  } else {
    query = fsDb.collection("books").where("ItemType", "==", "Book");
  }

  query.limit(100).get().then(querySnapshot=>{

        lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];

        querySnapshot.forEach(doc=>{
          console.log(doc.data())
          let data = doc.data();
          let row  = `<tr>
                                <td>${data.Title}</td>
                               
                        </tr>`;
          let table = document.getElementById('myTable')
          table.innerHTML  = row
        })
      })
      .catch(err=>{
        console.log(`Error: ${err}`)
      });
}

Комментарии:

1. Не могли бы вы показать мне, как я могу предоставить DocumentSnapshot документа последнего запроса, спасибо

2. let lastDocSnapshot = querySnapshot.docs[querySnapshot.docs.length - 1]; вы также можете ввести 99, но лучше сделать это таким образом, поскольку вы не знаете, прочитаете ли вы 100 документов, вы можете прочитать только 50. Таким образом, при этом вы получите последний документ, затем вы должны сохранить его и, когда пользователь запрашивает следующие документы, использовать его.

3. Привет, я обновил содержание своего вопроса

4. Я тоже отредактировал свой ответ, отвечает ли он на вопрос?

5. Привет, спасибо за вашу помощь. Я попытался использовать тот же код, и он отображает те же 100 документов, что и раньше

Метки: