การแบ่งหน้าแสดงข้อมูล ( Pagination ) จาก Firebase Database ( firestore ) ด้วย Javascript

สำหรับการดึงข้อมูลจาก Firebase Database ( firestore ) หากข้อมูลมีปริมาณเยอะ เราคควรที่แบ่งการแสดงข้อมูลทีละชุด ในตัวอย่างนี้จะแสดงวิธี อ่านข้อมูลจาก Firebase Database โดยแบ้งหน้าการแสดงดังนี้

รับเขียนโปรแกรม Firebase

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Firebase Database ( Firestore ) </title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" ></script>

</head>
<body>
    <div class="container" >

        <ul id="country_ul" class='list-group'></ul>

        <br />
        <div class="text-center">
              <button type="button" class="btn btn-primary" onclick="load_country()">Load More</button>
        </div>

    </div>

    <script >

    var page_size=5;//จำนวนที่แสดงต่อหน้า
    var cursor_next=null;//ตัวแปรเก็บ object แสดงแถวข้อมูลถัดไป

    //------------------------------ ตั้งค่า firebase ------------------------------
    var config = {
      apiKey: ".....",
      projectId: "....."
    };
    firebase.initializeApp(config);
    //------------------------------ ตั้งค่า firebase ------------------------------

        const db = firebase.firestore();//สร้าตัวแปร object สำหรับอ้างอิง firestore

        var country_ul=document.getElementById("country_ul");//สร้างตัวแปรอ้างอิง ul element เพื่อเพิ่มแถวข้อมูล

        function load_country()//function สำหรับ โหลดข้อมูลจาก Firestore มาแสดง
        {
                //อ่านข้อมูลจาก collection country
                //limit(page_size) คือกำหนดจำนวนแถวที่มาแสดง
                //orderBy("country_name","asc") คือกำหนดให้เลียงลำดับตาม country_name จากน้อยไปมาก
                //startAfter(cursor_next) คือให้แสดงข้อมูลหลังจาก แถวข้อมูลสุดท้ายของชุดข้อมูลล่าสุด
                db.collection("country").limit(page_size).orderBy("country_name","asc").startAfter(cursor_next).get().then(function(data) {

                  for(var i=0;i<data.docs.length;i++)
                  {   //วน loop เพิ่มแถวข้อมูลใน country_ul
                      var li=document.createElement("li");
                      li.innerHTML=data.docs[i].data().country_name;
                      li.classList.add("list-group-item");
                      country_ul.appendChild(li);
                  }
                  cursor_next=data.docs[data.docs.length-1];//กำหนด object ตัวล่าสุดของชุดข้อมูลที่โหลดมาเพื่อแสดงชุดข้อมูลถัดไป
              });
        }
        //เมื่อโหลดหน้าเว็บแล้วให้ทำงาน function load_country()
        document.addEventListener('DOMContentLoaded', function(){
                load_country();
        }, false);

    </script>

</body>
</html>

ผลลัพธ์ที่ได้คือ