از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
صفحه بندی در جاوا اسکریپت Vanilla هنگام ایجاد یک وب سایت یا برنامه وب، به خصوص اگر دارای محتوای قالب زیادی باشد (مانند شبکه یا لیستی از موارد متعلق به یک دسته) – به طور کلی ایده خوبی است که آن را به صفحات تقسیم کنید تا تعداد آنها کاهش یابد. مواردی که ظاهر می شوند روی صفحه نمایش…
سرفصلهای مطلب
معرفی
هنگام ایجاد یک وب سایت یا برنامه وب، به خصوص اگر دارای ویژگی های زیادی باشند قالب بندی شده محتوا (مانند یک شبکه یا لیستی از موارد متعلق به یک دسته) – به طور کلی ایده خوبی است که آن را به صفحات تقسیم کنید برای کاهش تعداد موارد ظاهر شده روی صفحه نمایش به یکباره
در این مقاله، روش پیاده سازی صفحه بندی در پروژه های وب خود را با استفاده از جاوا اسکریپت وانیلی از ابتدا یاد خواهیم گرفت.
برای هدف این مقاله، مطالب را از آن دریافت می کنیم این نمونه پاسخ 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
همانطور که قبلا ذکر شد، صفحه بندی تماماً در مورد تقسیم محتوا به قطعات کوچکتر است. از شما می خواهد که داده ها را واکشی کنید، تصمیم بگیرید که چه زمانی و چگونه تقسیم شوند، تعداد صفحات را محاسبه کنید و سپس بخشی از آن را به کاربر نشان دهید. خوشبختانه – عملکرد back-end معمولاً از چند کار اول مراقبت می کند و مربوطه را برمی گرداند page، تعداد کل صفحات و محتوا مطابق page.
توجه داشته باشید: بسته به روی API خاصی که با آن کار می کنید – ممکن است نتوانید نتایج را بارگیری کنید یا نتوانید. در صورت امکان – به جای بارگیری همه آنها از قبل، نتایج بارگذاری تنبل را ترجیح دهید. بیشتر APIهای مدرن از شیوه هایی پیروی می کنند که به شما امکان می دهد a را تنظیم کنید limit یا page شمارش کنید و تعداد کل صفحاتی را که می توانید نمایش دهید به کاربر برگردانید.
بیایید ابتدا همه پست‌هایمان را واکشی کنیم و بعداً این را اصلاح کنیم تا فقط چند نقطه داده در هر پرس و جو کنیم. page:
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 با حلقه زدن از طریق آنها.
در این مرحله، ما با موفقیت تمام محتوای خود را واکشی کردیم.
توجه داشته باشید: همچنین می توانید محتوا را با استفاده از روش دیگری واکشی کنید، اما مطمئن شوید که تمام محتوای شما بارگذاری شده است روی که page قبل از اینکه به ایجاد صفحه بندی بپردازیم.
روش پیاده سازی صفحه بندی در جاوا اسکریپت
بیایید با اعلام سه متغیری که برای پیاده سازی صفحه بندی در وب ما حیاتی هستند، شروع کنیم page. اولین مورد است تعداد پست هایی که می خواهیم به ازای هر پست اعلام کنیم page، سپس جاری page عدد (1 به طور پیش فرض)، و تعداد کل صفحات.
توجه داشته باشید: هنگام مصرف داده ها از یک API استاندارد و پایگاه داده، تعداد کل از صفحات یا نقاط داده معمولاً برگردانده می شود. اگر کل دریافت نکنیم page count، می توان آن را از طریق تعداد کل اشیاء و مقدار محاسبه کرد page اندازه.
برای این راهنما ما را ارائه می دهیم تعداد کل صفحات تعداد ثابتی از 30:
const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;
در قسمت قبل، همه پست ها را نمایش داده ایم روی یک مجرد page، اما ما می خواهیم فقط شش نفر را در یک زمان نشان دهیم. بنابراین، ما را تنظیم کرده ایم numberPerPage به 6 که اکنون از آن برای تنظیم عملیات واکشی استفاده می کنیم تا فقط نمایش داده شود 6 نوشته ها.
بستگی دارد روی پیاده سازی خاص، اما این یک روش گسترده است که اجازه می دهد از پارامترهای پرس و جو هنگام واکشی نتایج از API ها استفاده شود، که به شما امکان می دهد یک مقدار مشخص را واکشی کنید. page از نتایج. به عنوان مثال، API ساختگی REST که ما استفاده می کنیم، اجازه می دهد page و limit پارامترهایی که به شما امکان می دهند فقط دسته هایی را بارگیری کنید که در یک زمان معین نشان می دهید.
به این ترتیب ما فقط داده هایی را که می خواهیم به کاربر نشان دهیم بارگذاری می کنیم! سپس می توانیم مورد بعدی را از قبل واکشی کنیم page برای زمان بارگذاری سریع‌تر، یا لذت بردن از سرعت محاسباتی که تنها با بارگذاری داده‌های نمایش داده می‌شود.
ما با اصلاح درخواست واکشی خود از این پارامترها استفاده خواهیم کرد:
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 و تعداد پست در هر page که به ما کمک می کند پست های خود را به چندین صفحه تقسیم کنیم و سپس این پست ها اکنون می توانند بر اساس نمایش داده شوند روی را page عدد.
علاوه بر این، ما نیز در pageNumber به fetchPosts() تابع بنابراین ما می توانیم هر زمان که این تابع را فراخوانی کنیم page تغییرات:
بیایید اکنون عملکرد را به آن اضافه کنیم page دکمه های ناوبری در پایین صفحه ما page و از آنها بخواهید محتوای مناسب را بر اساس نمایش دهند روی را page عدد.
پیاده سازی منطق صفحه بندی
متوجه خواهیم شد که در نشانه گذاری، بخشی داشتیم که دکمه های صفحه بندی را نشان می دهد:
<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 رویدادها برای هر دکمه به طوری که وقتی روی آنها کلیک می شود، محتوای در نظر گرفته شده برای آن page ظاهر می شود.
پیاده سازی قبلی دکمه
منطق اینجا بسیار ساده است. تنها کاری که باید انجام دهیم این است که عنصری را که نشان دهنده آن است بازیابی کنیم دکمه قبلی، اضافه کردن click شنونده رویداد به آن و نمایش محتوای مناسب با کلیک روی دکمه:
// Add event listeners to the prev button
const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => {
e.preventDefault();
if (pageNumber > 1) {
pageNumber--;
fetchPosts(pageNumber);
}
});
پس از افزودن a click شنونده رویداد، ما بررسی کردیم که آیا فعلی است یا خیر page تعداد بیشتر از 1 در عملکرد برگشت تماس اگر عدد برابر یا کمتر از آن باشد 1، ما فقط به نمایش محتوای فعلی ادامه می دهیم. اما اگر جریان page تعداد بیشتر از 1 می‌توانیم آزادانه ارزش آن را کاهش دهیم و آن را صدا کنیم fetchPosts(pageNumber) عملکرد با جدید page عدد به عنوان آرگومان در آن ارسال می شود، بنابراین محتوای قبلی را نشان می دهد page.
پیاده سازی بعد دکمه
منطق در اینجا کاملاً مشابه است قبلی دکمه، تنها با چند تغییر جزئی. البته، ما عنصر لیست را با کلاس بازیابی می کنیم next بجای prev. همچنین، ما بررسی خواهیم کرد که آیا جریان فعلی page عدد کمتر از تعدادی از صفحات که ما تعیین کردیم 30 به صورت دستی زودتر در پایان، جریان را افزایش خواهیم داد page عدد به جای کاهش آن:
// Add event listeners to the next button
const next = document.querySelector(".next");
next.addEventListener("click", (e) => {
e.preventDefault();
if (pageNumber < numberOfPages) {
pageNumber++;
fetchPosts(pageNumber);
}
});
نتیجه
هر زمان که بخواهید یک پایگاه داده یا هر منبع داده دیگری را نمایش دهید، تقسیم محتوا به قطعات کوچکتر و قابل مدیریت تر که به صورت جداگانه نمایش داده می شوند بسیار مهم است. روی برنامه وب شما
در این مقاله نگاهی به روش پیاده سازی صفحه بندی با جاوا اسکریپت از ابتدا، بدون کتابخانه و ابزار خارجی انداختیم.
منتشر شده در 1403-01-05 04:38:11
