Я не могу сделать нумерацию страниц в веб-приложении Firebase в реальном времени

Question

Я пытаюсь создать мини-проект из базы данных в реальном времени базы данных Firebase, но у меня проблема с большим количеством данных. Я хочу показать только 3 элемента, а другие элементы классифицируются как нумерация страниц.

нравится

Я стараюсь следовать другим статьям в stackoverflow Но у меня ничего не получилось.

ref 1: Пагинация БД в реальном времени Firebase

ref 2: Как реализовать разбиение на страницы в Firebase с помощью JavaScript?

это мой код

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

Что мне делать? Большое спасибо.

Answer 1

Для начала вам необходимо загрузить и обработать данные, готовые для добавления в таблицу. Поскольку вы sh знаете, сколько страниц записей у вас есть, сначала вы должны выполнить поверхностный запрос для всех документов в вашей базе данных.

Чтобы получить этот список, вы должны 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
}