How to implement pagination in Firebase using JavaScript?

问题

I am working on Firebase pagination using JavaScript. I have implemented a soft delete feature where the record is not deleted in Firebase but deleted in the web display.

So when a soft delete is being done, the visible flag in Firebase becomes false. I want to display on my web form, the contacts whose visible flag is true using JavaScript ( with the NEXT and PREV buttons ).

Since I am new to this, I would love to get suggestions and help!!

A Snapshot of Firebase is as follows:

My code of getting first three records initially is as follows :

function getData() {

  var total="";
  var firstRef = firebase.database().ref("Persons/").orderByChild("visible").endAt("true").limitToFirst(3);

    firstRef.on("value", function (data) {
    console.log(data.val());
    a = data.val();
    var keys = Object.keys(a);
    key1 = keys[0];
    key2 = keys[1];
    console.log("Key 1" + keys[0]);
    for (var i = 0; i < keys.length; i++) 
    {

      var k = keys[i];
      var fname = a[k].fname;
      var lname = a[k].lname;
      var mno = a[k].mno;
      var email = a[k].email;
      var image = a[k].image;
      var visible = a[k].visible;

      if (visible == true) {


        total += "<div><br/></div<div><b>KEY ID:  </b><h1>" + k + "</h1></div><div><br/></div><div><img src=" + image + " alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>" + fname + "</div><div><b>LAST NAME : </b>" + lname + "</div><div><b>MOBILE NO : </b>" + mno + "</div><div><b>EMAIL : </b>" + email + "</div><div><br/><b><hr><hr></b></div>";

        document.getElementById('total').innerHTML = total;

      }
   } 
  },
   function (error) {
      console.log("Error: " + error.code);
    });
  }

To get the Next three records (which will be called when the NEXT button is pressed ), I have written a code as follows :

function next() {
    var total="";
    var lastRef = firebase.database().ref("Persons").orderByKey().startAt(key2 + "a").limitToFirst(3);

   lastRef.on("value", function (data) {

     c = data.val();
     var keys = Object.keys(c);
     for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var visible = c[k].visible;

   if(visible==true)
   {
      var fname = c[k].fname;
      var lname = c[k].lname;
      var mno = c[k].mno;
      var email = c[k].email;
      var image = c[k].image;

     total += "<div><br/></div<div><b>KEY ID:  </b><h1>" + k + "</h1></div><div><br/></div><div><img src=" + image + " alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>" + fname + "</div><div><b>LAST NAME : </b>" + lname + "</div><div><b>MOBILE NO : </b>" + mno + "</div><div><b>EMAIL : </b>" + email + "</div><div><br/><b><hr><hr></b></div>";

        document.getElementById('total').innerHTML = total;

      }
      }
      key3=key1;
      key4=key2;
      key2=keys[2];
      key1=keys[0];

    }, 

    function (error) {
      console.log("Error: " + error.code);
    });

}

I am new to Firebase, so please do correct me if I am wrong and also, if anybody could help me with PREV, it would be great!!

Thanks!!

来源：https://stackoverflow.com/questions/47068832/how-to-implement-pagination-in-firebase-using-javascript