صفحه بندی در جاوا اسکریپت وانیلی

معرفی

هنگام ایجاد یک وب سایت یا برنامه وب، به خصوص اگر دارای ویژگی های زیادی باشند قالب بندی شده محتوا (مانند یک شبکه یا فهرستی از موارد متعلق به یک دسته) – به طور کلی ایده خوبی است که آن را به صفحات تقسیم کنید برای کاهش تعداد مواردی که به طور همزمان روی صفحه ظاهر می شوند.

در این مقاله، نحوه پیاده سازی صفحه بندی در پروژه های وب خود را با استفاده از جاوا اسکریپت وانیلی از ابتدا یاد خواهیم گرفت.

برای هدف این مقاله، مطالب را از آن دریافت می کنیم این نمونه پاسخ 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 معمولاً از چند کار اول مراقبت می کند و صفحه مربوطه، تعداد کل صفحات و محتوا را برمی گرداند. هر صفحه.

بیایید ابتدا همه پست‌هایمان را واکشی کنیم و بعداً این را اصلاح کنیم تا فقط چند نقطه داده در هر صفحه را پرس و جو کنیم:

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ها، که به شما امکان می دهد مقدار مشخصی را واکشی کنید، یک عمل گسترده است. با ما از نتایج. به عنوان مثال، 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); }
});

پس از افزودن a 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); }
});

نتیجه

هر زمان که بخواهید یک پایگاه داده یا هر منبع داده دیگری را در برنامه وب خود نمایش دهید، تقسیم محتوا به قطعات کوچکتر و قابل مدیریت تر که به صورت جداگانه نمایش داده می شوند بسیار مهم است.

در این مقاله نگاهی به نحوه پیاده سازی صفحه بندی با جاوا اسکریپت از ابتدا، بدون کتابخانه و ابزار خارجی انداختیم.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://stackabuse.com/pagination-in-vanilla-javascript/