我无法在实时 Firebase 网络应用程序中进行分页

Question

我正在尝试从 firebase 数据库的实时数据库创建一个迷你项目，但是我遇到了很多数据的问题。我只想显示 3 个项目，其他项目被归类为分页。

喜欢这个

我尝试关注stackoverflow中的其他文章但是我没有成功。

参考 1：Firebase Realtime DB pagination

参考 2：How to implement pagination in Firebase using JavaScript?

这是我的代码

https://codesandbox.io/s/epic-elbakyan-wmwmq

我该怎么办？ 非常感谢。

Answer 1

首先，您需要下载并处理准备好添加到表格中的数据。因为您想知道您有多少页的条目，所以您首先必须对数据库中的所有文档执行浅层查询。

要获取此列表，您可以fetch()（如果需要，需要适当的授权）以下 URL：

https://testrealtime-191b1.firebaseio.com/project.json?shallow=true

这将返回数据库中所有项目的列表：

{
  "-M3aofA_ZwRPwqVdAv7r" : true,
  "-M3aogPeqB6kGi5RxDY0" : true,
  "-M3aor_wyrxlbD5A6BSn" : true
  ...
}

然后您可以使用Object.keys(data).length 计算列表中的条目数。请注意，当用户查看表格时，此数字可能会增加或减少。做好处理此类案件的准备。

接下来，您应该下载第一页数据：

function showData() {
  var PAGE_SIZE = 3;

  // TODO: Fetch page count & then update page buttons
  fetch('https://testrealtime-191b1.firebaseio.com/project.json?shallow=true')
    .then(function (response) { return response.json() })
    .then(function (projectKeysObject) {
      var projectCount = Object.keys(projectKeysObject).length;
      var pageCount = Math.ceil(projectCount / PAGE_SIZE);
      // TODO: Update UI with appropriate number of page buttons
    })
    .catch(console.error) // TODO: handle errors

  // in parallel to the above, fetch your initial page of data
  var projectsRef = firebase.database().ref("project");

  projectsRef.limitToFirst(PAGE_SIZE).once("value").then(function(querySnapshot) {
    querySnapshot.forEach(function(projectSnapshot) {
      var projectKey = projectSnapshot.key;
      var projectData = projectSnapshot.val();

      // init row
      var rowEle = table.insertRow(); // appends row

      // add data to row
      rowEle.insertCell().append(projectData.published);
      rowEle.insertCell().innerHTML = '<img src="' + projectData.img_post + '" alt=""><span class="title-post">' + projectData.title_post + '</span>';
      rowEle.insertCell().append(projectData.reward);
      rowEle.insertCell().append(projectData.quantity);
      rowEle.insertCell().append(projectData.announce);

      // add button to last column
      var btnUpdate = document.createElement("button");
      btnUpdate.textContent = "edit";
      btnUpdate.setAttribute("class", "bbbb");
      btnUpdate.setAttribute("data-id", projectKey);
      btnUpdate.setAttribute("disabled", true);
      rowEle.insertCell().append(btnUpdate);
    });
  })
  .catch(console.error); // TODO: handle errors
}