title: How to implement pagination in Firebase using JavaScript?
body: <p>I am working on Firebase pagination using JavaScript. I have implemented a <strong>soft delete</strong> feature where the record is <strong>not deleted in Firebase</strong> but deleted in the web display.</p>
  
  <p>So when a soft delete is being done, the <strong>visible</strong> flag in Firebase becomes false. I want to display on my web form, the contacts whose <strong>visible</strong> flag is <strong>true</strong> using JavaScript ( with the <strong>NEXT</strong> and <strong>PREV</strong> buttons ).</p>
  
  <p>Since I am new to this, I would love to get suggestions and help!!</p>
  
  <p>A Snapshot of Firebase is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/lR585.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lR585.png" alt="enter image description here"></a></p>
  
  <p>My code of <strong>getting first three records initially</strong> is as follows :</p>
  
  <pre><code>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 &lt; 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 += "&lt;div&gt;&lt;br/&gt;&lt;/div&lt;div&gt;&lt;b&gt;KEY ID:  &lt;/b&gt;&lt;h1&gt;" + k + "&lt;/h1&gt;&lt;/div&gt;&lt;div&gt;&lt;br/&gt;&lt;/div&gt;&lt;div&gt;&lt;img src=" + image + " alt=NoProfilePic class=imgsrc&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;FIRST NAME : &lt;/b&gt;" + fname + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;LAST NAME : &lt;/b&gt;" + lname + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;MOBILE NO : &lt;/b&gt;" + mno + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;EMAIL : &lt;/b&gt;" + email + "&lt;/div&gt;&lt;div&gt;&lt;br/&gt;&lt;b&gt;&lt;hr&gt;&lt;hr&gt;&lt;/b&gt;&lt;/div&gt;";
  
          document.getElementById('total').innerHTML = total;
  
        }
     } 
    },
     function (error) {
        console.log("Error: " + error.code);
      });
    }
  </code></pre>
  
  <p>To get the <strong>Next three records</strong> (which will be called when the <strong>NEXT</strong> button is pressed ), I have written a code as follows :</p>
  
  <pre><code>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 &lt; 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 += "&lt;div&gt;&lt;br/&gt;&lt;/div&lt;div&gt;&lt;b&gt;KEY ID:  &lt;/b&gt;&lt;h1&gt;" + k + "&lt;/h1&gt;&lt;/div&gt;&lt;div&gt;&lt;br/&gt;&lt;/div&gt;&lt;div&gt;&lt;img src=" + image + " alt=NoProfilePic class=imgsrc&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;FIRST NAME : &lt;/b&gt;" + fname + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;LAST NAME : &lt;/b&gt;" + lname + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;MOBILE NO : &lt;/b&gt;" + mno + "&lt;/div&gt;&lt;div&gt;&lt;b&gt;EMAIL : &lt;/b&gt;" + email + "&lt;/div&gt;&lt;div&gt;&lt;br/&gt;&lt;b&gt;&lt;hr&gt;&lt;hr&gt;&lt;/b&gt;&lt;/div&gt;";
  
          document.getElementById('total').innerHTML = total;
  
        }
        }
        key3=key1;
        key4=key2;
        key2=keys[2];
        key1=keys[0];
  
      }, 
  
      function (error) {
        console.log("Error: " + error.code);
      });
  
  }
  </code></pre>
  
  <p>I am new to Firebase, so please do correct me if I am wrong and also, if anybody could help me with <strong>PREV</strong>, it would be great!!</p>
  
  <p>Thanks!!</p>