ভ্যানিলা জাভাস্ক্রিপ্টে পেজিনেশন

ভূমিকা

একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, বিশেষ করে যদি তারা অনেক বৈশিষ্ট্যযুক্ত টেমপ্লেটেড বিষয়বস্তু (যেমন একটি গ্রিড বা একটি বিভাগের অন্তর্গত আইটেমগুলির তালিকা) - এটি সাধারণত একটি ভাল ধারণা পৃষ্ঠাগুলিতে ভাগ করুন একবারে পর্দায় প্রদর্শিত আইটেম সংখ্যা কমাতে.

এই নিবন্ধে, আমরা শিখব কিভাবে আমাদের ওয়েব প্রজেক্টে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে পেজিনেশন প্রয়োগ করতে হয়।

এই নিবন্ধের উদ্দেশ্যে, আমরা থেকে বিষয়বস্তু আনা হবে এই উদাহরণ API প্রতিক্রিয়া। এটিতে 100টি ডেটা পয়েন্ট রয়েছে, কিন্তু আমরা শুধুমাত্র 30টি ব্যবহার করব এবং আমাদের স্ক্রিনে একবারে 6টি পোস্ট প্রদর্শন করব৷

শুরু হচ্ছে

বিল্ট-ইন ফেচ এপিআই ব্যবহার করে এপিআই থেকে সমস্ত প্রয়োজনীয় পোস্ট আনার আগে, আমাদের প্রথমে একটি মৌলিক 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() ফাংশন, আমরা ব্যবহার করি এপিআই আনুন থেকে পোস্ট পুনরুদ্ধার করতে JSON স্থানধারক পোস্ট API, তারপর এর দ্বারা উল্লেখ করা JSON ডেটা সংরক্ষণ করুন posts পরিবর্তনশীল এবং ব্যবহার করা হয় innerHTML উপাদান প্রতিটি অংশ যোগ করার জন্য সম্পত্তি posts-section তাদের মাধ্যমে looping দ্বারা.

এই মুহুর্তে, আমরা সফলভাবে আমাদের সমস্ত সামগ্রী নিয়ে এসেছি।

আসুন তিনটি ভেরিয়েবল ঘোষণা করে শুরু করা যাক যা আমাদের ওয়েব পৃষ্ঠার মধ্যে পেজিনেশন বাস্তবায়নের জন্য গুরুত্বপূর্ণ। প্রথম এক হল পোস্টের সংখ্যা আমরা প্রতি পৃষ্ঠায় ঘোষণা করতে চাই, এরপর বর্তমান পৃষ্ঠা নম্বর (1 ডিফল্টরূপে), এবং পৃষ্ঠার মোট সংখ্যা.

এই গাইডের জন্য আমরা দেব পৃষ্ঠার মোট সংখ্যা একটি নির্দিষ্ট সংখ্যা 30:

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

পূর্ববর্তী বিভাগে, আমরা একটি একক পৃষ্ঠায় সমস্ত পোস্ট প্রদর্শন করেছি, কিন্তু আমরা একবারে মাত্র ছয়টি প্রদর্শন করতে চাই৷ অতএব, আমরা সেট করেছি numberPerPage থেকে 6 যা আমরা এখন ফেচ অপারেশন সামঞ্জস্য করতে ব্যবহার করব যাতে এটি শুধুমাত্র প্রদর্শন করে 6 পোস্ট নেই।

এটি নির্দিষ্ট বাস্তবায়নের উপর নির্ভর করে, কিন্তু APIs থেকে ফলাফল আনার সময় ক্যোয়ারী প্যারামিটারগুলি ব্যবহার করার অনুমতি দেওয়ার জন্য এটি ব্যাপক-বিস্তৃত অনুশীলন, যা আপনাকে একটি নির্দিষ্ট আনয়ন করতে দেয় পৃষ্ঠা ফলাফলের উদাহরণ স্বরূপ আমরা যে মক 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); }
});

উপসংহার

যখনই আপনি আপনার ওয়েব অ্যাপ্লিকেশনে একটি ডাটাবেস বা অন্য কোনো ডেটা উৎস প্রদর্শন করার চেষ্টা করেন তখনই পৃথকভাবে প্রদর্শিত হয় এমন ছোট, আরও পরিচালনাযোগ্য খণ্ডে সামগ্রী বিভক্ত করা অত্যন্ত গুরুত্বপূর্ণ।

এই নিবন্ধে, আমরা কোন বাহ্যিক লাইব্রেরি এবং সরঞ্জাম ছাড়াই স্ক্র্যাচ থেকে জাভাস্ক্রিপ্টের সাথে পেজিনেশন কীভাবে প্রয়োগ করতে হয় তা দেখেছি।

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://stackabuse.com/pagination-in-vanilla-javascript/