עימוד ב-Vanilla 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. לבסוף, כתבנו פונקציה לטיפול בפעולת האחזור.

ב fetchPosts() הפונקציה, השתמשנו ב- תביא API כדי לאחזר הודעות מה JSON Placeholder posts API, ולאחר מכן אחסן את נתוני ה-JSON שאליהם מתייחסים posts משתנה והשתמש ב- innerHTML נכס כדי להוסיף כל פיסת תוכן ל- posts-section על ידי לולאה דרכם.

בשלב זה, הבאנו בהצלחה את כל התוכן שלנו.

נתחיל בהכרזה על שלושה משתנים שהם קריטיים ליישום עימוד בדף האינטרנט שלנו. הראשון הוא ה מספר הפוסטים שאנו רוצים להצהיר בכל עמוד, אז ה מספר העמוד הנוכחי (1 כברירת מחדל), ואת מספר הדפים הכולל.

עבור מדריך זה ניתן את מספר הדפים הכולל מספר קבוע של 30:

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

בסעיף הקודם, הצגנו את כל הפוסטים בעמוד בודד, אבל אנחנו רוצים להציג רק שישה בכל פעם. לכן, קבענו את numberPerPage ל 6 בו נשתמש כעת כדי להתאים את פעולת האחזור כך שהיא תוצג רק 6 הודעות.

זה תלוי ביישום הספציפי, אבל זה נוהג נפוץ לאפשר שימוש בפרמטרי שאילתה בעת שליפת תוצאות ממשקי API, המאפשרים לך לאחזר מסוים עמוד של התוצאות. לדוגמה, ה-API המדומה של REST שבו אנו משתמשים מאפשר את 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. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://stackabuse.com/pagination-in-vanilla-javascript/