การแบ่งหน้าในวานิลลา JavaScript

บทนำ

เมื่อสร้างเว็บไซต์หรือเว็บแอปพลิเคชัน โดยเฉพาะอย่างยิ่งหากมีฟีเจอร์มากมาย เทมเพลต เนื้อหา (เช่น ตารางหรือรายการที่เป็นของหมวดหมู่) – โดยทั่วไปแล้วเป็นความคิดที่ดี แบ่งเป็นหน้าๆ เพื่อลดจำนวนรายการที่ปรากฏบนหน้าจอพร้อมกัน

ในบทความนี้ เราจะเรียนรู้วิธีใช้การแบ่งหน้าในโครงการเว็บของเราโดยใช้วานิลลา JavaScript ตั้งแต่เริ่มต้น

สำหรับจุดประสงค์ของบทความนี้ เราจะดึงเนื้อหาจาก นี้ ตัวอย่างการตอบกลับ API ประกอบด้วยจุดข้อมูล 100 จุด แต่เราจะใช้เพียง 30 จุดและแสดง 6 โพสต์บนหน้าจอของเราในแต่ละครั้ง

เริ่มต้นใช้งาน

ก่อนที่จะดึงโพสต์ที่จำเป็นทั้งหมดจาก API โดยใช้ Fetch API ในตัวของเบราว์เซอร์ ก่อนอื่นเราต้องสร้างมาร์กอัป HTML พื้นฐานซึ่งจะถูกเติมแบบไดนามิกผ่านสคริปต์ของเราในภายหลัง:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

กำลังดึงโพสต์ REST API

ดังที่ได้กล่าวไว้ก่อนหน้านี้ การแบ่งหน้าคือการแบ่งเนื้อหาออกเป็นส่วนย่อยๆ คุณต้องดึงข้อมูล ตัดสินใจว่าจะแยกเมื่อใดและอย่างไร คำนวณจำนวนหน้า แล้วแสดงข้อมูลส่วนหนึ่งให้ผู้ใช้เห็น โชคดีที่ฟังก์ชันแบ็คเอนด์มักจะดูแลงานแรกๆ และส่งกลับหน้าที่เกี่ยวข้อง จำนวนหน้าทั้งหมด และเนื้อหา ต่อหน้า.

เริ่มต้นด้วยการดึงข้อมูลโพสต์ทั้งหมดของเราก่อน จากนั้นเราจะแก้ไขในภายหลังเพื่อสอบถามจุดข้อมูลเพียงไม่กี่รายการต่อหน้า:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

ลองตรวจสอบรหัสด้านบนอย่างรวดเร็ว ก่อนอื่น เราเริ่มต้นด้วยการได้รับ div องค์ประกอบที่เราจะแสดงเนื้อหาทั้งหมดของเราผ่านทาง class ชื่อที่เรากำหนดให้ div. สุดท้าย เราเขียนฟังก์ชันเพื่อจัดการกับการดำเนินการดึงข้อมูล

ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร fetchPosts() ฟังก์ชันเราใช้ เรียก API เพื่อดึงโพสต์จาก JSON Placeholder โพสต์ APIจากนั้นเก็บข้อมูล JSON ที่อ้างอิงโดย posts ตัวแปรและใช้ innerHTML คุณสมบัติเพื่อเพิ่มเนื้อหาแต่ละส่วนลงใน posts-section โดยวนรอบพวกเขา

ณ จุดนี้ เราได้ดึงเนื้อหาทั้งหมดของเราเรียบร้อยแล้ว

เริ่มต้นด้วยการประกาศตัวแปรสามตัวที่มีความสำคัญต่อการนำเลขหน้าไปใช้ในหน้าเว็บของเรา คนแรกคือ จำนวนโพสต์ที่เราต้องการประกาศต่อหน้าแล้ว หมายเลขหน้าปัจจุบัน (1 โดยค่าเริ่มต้น) และ จำนวนหน้าทั้งหมด.

สำหรับคำแนะนำนี้เราจะให้ จำนวนหน้าทั้งหมด จำนวนคงที่ 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

ในส่วนก่อนหน้านี้ เราได้แสดงโพสต์ทั้งหมดในหน้าเดียว แต่เราต้องการแสดงเพียงหกรายการในแต่ละครั้ง ดังนั้นเราจึงได้ตั้งค่า numberPerPage ไปยัง 6 ซึ่งตอนนี้เราจะใช้เพื่อปรับการดำเนินการดึงข้อมูลเพื่อให้แสดงเท่านั้น 6 โพสต์

ขึ้นอยู่กับการใช้งานเฉพาะ แต่เป็นแนวทางปฏิบัติที่แพร่หลายในการอนุญาตให้ใช้พารามิเตอร์การสืบค้นเมื่อดึงผลลัพธ์จาก API ซึ่งช่วยให้คุณสามารถดึงข้อมูลบางอย่าง หน้า ของผลลัพธ์ ตัวอย่างเช่น REST API จำลองที่เราใช้อนุญาตให้ใช้ page และ limit พารามิเตอร์ที่ให้คุณโหลดชุดงานที่คุณจะแสดงในเวลาที่กำหนดเท่านั้น

ด้วยวิธีนี้ เราจะโหลดข้อมูลที่เราต้องการแสดงต่อผู้ใช้เท่านั้น! จากนั้นเราสามารถดึงหน้าถัดไปล่วงหน้าเพื่อเวลาในการโหลดที่เร็วขึ้น หรือสนุกไปกับการเร่งความเร็วการคำนวณที่ทำได้โดยการโหลดข้อมูลที่จะแสดงเท่านั้น

เราจะใช้พารามิเตอร์เหล่านี้โดยแก้ไขคำขอดึงข้อมูลของเรา:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

ในโค้ดข้างต้น เราได้เพิ่มพารามิเตอร์สองตัวไปยังปลายทาง API ซึ่งก็คือ pageNumber และ จำนวนโพสต์ต่อหน้า ซึ่งจะช่วยให้เราแบ่งโพสต์ของเราออกเป็นหลายหน้า และตอนนี้โพสต์เหล่านี้สามารถแสดงตามหมายเลขหน้าได้

นอกจากนี้เรายังผ่านใน pageNumber ไป fetchPosts() ฟังก์ชันเพื่อให้เราสามารถเรียกใช้ฟังก์ชันนี้ทุกครั้งที่หน้าเปลี่ยน:

ตอนนี้เรามาเพิ่มฟังก์ชันการทำงานให้กับปุ่มการนำทางของเพจที่ด้านล่างสุดของเพจของเรา และให้พวกมันแสดงเนื้อหาที่เหมาะสมตามหมายเลขเพจ

เราจะสังเกตเห็นว่าในมาร์กอัปเรามีส่วนที่แสดงปุ่มเลขหน้า:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

ตอนนี้เรากำลังจะเพิ่ม click เหตุการณ์ในแต่ละปุ่มเพื่อให้เมื่อมีการคลิก เนื้อหาสำหรับหน้านั้นจะปรากฏขึ้น

การใช้งาน ก่อนหน้า ปุ่ม

ตรรกะที่นี่ค่อนข้างง่าย สิ่งที่เราต้องทำคือดึงองค์ประกอบที่เป็นตัวแทนของ ปุ่มก่อนหน้าเพิ่ม click ฟังเหตุการณ์และแสดงเนื้อหาที่เหมาะสมเมื่อคลิกปุ่ม:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

หลังจากเพิ่ม ก click ผู้ฟังเหตุการณ์ เราได้ตรวจสอบว่าหมายเลขหน้าปัจจุบันมากกว่าหรือไม่ 1 ในฟังก์ชั่นโทรกลับ ถ้าตัวเลขเท่ากับหรือน้อยกว่า 1เราจะแสดงเนื้อหาปัจจุบันต่อไป แต่ถ้าเลขหน้าปัจจุบันมากกว่า 1 เราสามารถลดค่าของมันได้อย่างอิสระและเรียกมันว่า fetchPosts(pageNumber) ฟังก์ชันที่มีการป้อนหมายเลขหน้าใหม่เป็นอาร์กิวเมนต์ ดังนั้นการแสดงเนื้อหาของหน้าที่แล้ว

การใช้งาน ถัดไป ปุ่ม

ตรรกะที่นี่เหมือนกับของ ก่อน ปุ่มที่มีการเปลี่ยนแปลงเล็กน้อยเพียงเล็กน้อย แน่นอน เราจะดึงรายการองค์ประกอบกับชั้นเรียน next แทน prev. นอกจากนี้ เราจะตรวจสอบว่าหมายเลขหน้าปัจจุบันน้อยกว่า เลขหน้า ที่เราตั้งไว้ 30 ด้วยตนเองก่อนหน้านี้ ในตอนท้าย เราจะเพิ่มหมายเลขหน้าปัจจุบันแทนการลด:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

สรุป

การแบ่งเนื้อหาออกเป็นส่วนย่อยๆ ที่สามารถจัดการได้มากขึ้นซึ่งแสดงทีละรายการเป็นสิ่งสำคัญเมื่อใดก็ตามที่คุณพยายามแสดงฐานข้อมูลหรือแหล่งข้อมูลอื่นๆ บนเว็บแอปพลิเคชันของคุณ

ในบทความนี้ เราได้ดูวิธีการใช้การแบ่งหน้าด้วย JavaScript ตั้งแต่เริ่มต้น โดยไม่ต้องมีไลบรารีและเครื่องมือภายนอกใดๆ

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://stackabuse.com/pagination-in-vanilla-javascript/