สร้างตัวแบ่งหน้า (pagination) แบบง่ายๆ

 

ตัวอย่างไฟล์ Google Sheet:
https://docs.google.com/spreadsheets/d/1FWgYtUM3MRkw33zr1xnncOCP7mU0MvSyhHbBnuqDu6k/edit?usp=sharing

ตัวอย่างสคริปต์

  <script>

    let itemPerPage = 9;

    let currentPage = 1;

    let totalPage = <?!= data.length ?>/itemPerPage

    let card = document.querySelectorAll('.col');

    let btnBack = document.getElementById('btnBack');

    let btnNext = document.getElementById('btnNext');

    let btnCurrent = document.getElementById('current_page');

    card.forEach((item,i)=>{

      i<itemPerPage ? item.classList.remove('d-none'):'';

    })

    function pagination(page) {

      page == 'next' ? currentPage++ : currentPage--;

      btnCurrent.innerHTML = 'หน้าที่ '+currentPage;

      currentPage <= 1 ? btnBack.disabled = true : btnBack.disabled = false;

      currentPage >= totalPage ? btnNext.disabled = true : btnNext.disabled = false;

      card.forEach((item,i)=>{

        i < ((currentPage-1)*itemPerPage) || i >= (((currentPage-1)*itemPerPage)+itemPerPage) ?

        item.classList.add('d-none') :

        item.classList.remove('d-none');

      })

    }

  </script>