การแสดงข้อมูลบนเว็บไซต์ยุคปัจจุบันนั้นมีการพัฒนาไปอย่างมาก หนึ่งในนวัตกรรมสำคัญที่ช่วยให้ผู้ใช้งานเว็บไซต์ได้รับประสบการณ์ที่ดียิ่งขึ้นคือการออกแบบวิธีการแสดงข้อมูลออนไลน์ ที่ผู้เขียนจะพูดถึงวันนี้คือ Infinite Scrolling และ Pagination ซึ่งทั้งสองวิธีนี้มีความแตกต่างและสำคัญต่อการใช้งานเว็บไซต์อย่างมาก เราจะมาดูกันว่าคืออะไรและใช้ทำอะไร และสำคัญอย่างไร พร้อมตัวอย่างโค้ดใน JavaScript
Infinite Scrolling คือการออกแบบหน้าเว็บที่ทำให้เนื้อหาโหลดมาเรื่อยๆเมื่อผู้ใช้เลื่อนลงไปยังส่วนท้ายของหน้า มันมักจะใช้ในเว็บไซต์ที่ต้องการแสดงข้อมูลที่ไม่มีข้อจำกัด อย่างเช่นโซเชียลมีเดียหรือเว็บไซต์ข่าว เทคนิคนี้ช่วยให้ผู้ใช้คลิ๊กหาข้อมูลอย่างไม่รู้จบ สร้างความรู้สึกเหมือนได้ย่ำราตรีในโลกข้อมูลอย่างไร้ศูนย์กลาง
Pagination หรือการแบ่งหน้าเป็นวิธีการที่เราเห็นกันบ่อยในหนังสือหรือสารคดี แต่ในโลกออนไลน์นั้นการ Pagination คือการจัดข้อมูลให้อยู่ในหน้าต่างๆ ที่มีข้อมูลจำกัด ทำให้ผู้ใช้สามารถเลือกไปที่หน้าต่างๆ ได้อย่างง่ายดาย นิยมใช้ในเว็บสอบถามข้อมูลหรือผลลัพธ์ของการค้นหาที่มีชุดข้อมูลเฉพาะที่ชัดเจน
การเลือกใช้ Infinite Scrolling หรือ Pagination นั้นมีความสำคัญต่อการที่ผู้ใช้งานเว็บสามารถเข้าถึงข้อมูลค่อยๆ หรืออย่างรวดเร็ว ซึ่งการนี้ก็ขึ้นอยู่กับจำนวนข้อมูลและความเหมาะสมในแต่ละบริบท เมื่อเลือกไม่ถูก อาจส่งผลเสียต่อ UX (User Experience) ที่ผู้ใช้ต้องการ เช่น Infinite Scrolling ที่ไม่เหมาะกับเว็บข่าวที่ต้องการความแม่นยำในข้อมูลในแต่ละหัวข้อ หรือ Pagination ที่ไม่เหมาะกับสถานการณ์ที่ต้องการแสดงความต่อเนื่องของสตรีมมีเดีย
// ตัวอย่างการใช้ Load More Content ด้วย JavaScript และ API
let content = document.getElementById("content");
let page = 1;
const loadMoreContent = async () => {
const response = await fetch(`https://api.example.com/items?page=${page}`);
const data = await response.json();
data.items.forEach(item => {
const div = document.createElement("div");
div.textContent = item.name; // รับข้อมูลไอเท็ม
content.appendChild(div);
});
page++; // ขยับไปหน้าถัดไป
};
// เพิ่ม Event Listener ให้กับ window เพื่อโหลดเนื้อหาเพิ่มเติมเมื่อเลื่อนถึงด้านล่าง
window.addEventListener('scroll', () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
loadMoreContent();
}
});
// ตัวอย่าง Pagination ด้วย JavaScript
let current_page = 1;
let records_per_page = 3;
const objJson = [
{ adName: "AdName 1"},
{ adName: "AdName 2"},
{ adName: "AdName 3"},
//... เพิ่มข้อมูลตามจริง
];
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page) {
const listing_table = document.getElementById("listingTable");
listing_table.innerHTML = "";
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) {
listing_table.innerHTML += objJson[i].adName + "
";
}
}
function numPages() {
return Math.ceil(objJson.length / records_per_page);
}
window.onload = function() {
changePage(1);
};
การเลือกระหว่าง Infinite Scrolling และ Pagination จึงไม่ใช่เรื่องของแฟชันหรือความนิยมเท่านั้น แต่เป็นการพินิจพิจารณาให้เหมาะสมกับความต้องการข้อมูลและประสบการณ์ของผู้ใช้งานเว็บไซต์
หากคุณเป็นคนที่หลงใหลในโลกการพัฒนาระบบเว็บไซต์ และต้องการที่จะเรียนรู้เกี่ยวกับการใช้งาน Infinite Scrolling หรือ Pagination อย่างลึกซึ้ง ที่ EPT (Expert-Programming-Tutor) เรามีคอร์สการเรียนรู้เจาะลึกเรื่องเทคนิคต่างๆ ด้านการเขียนโปรแกรมประยุกต์ ที่จะทำให้คุณเข้าใจถึงเหตุผลและวิธีการเลือกใช้ที่เหมาะสมยิ่งขึ้น
สนใจให้เราช่วยอุปการะ "โจนส์เขียนโค้ด" ของคุณ? ติดต่อ EPT เพื่ออนาคตการเขียนโค้ดที่เจิดจรัสเหนือคู่แข่งได้เลย!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM