वेनिला जावास्क्रिप्ट में पृष्ठांकन

परिचय

वेबसाइट या वेब एप्लिकेशन बनाते समय, विशेष रूप से यदि उनमें बहुत सी विशेषताएँ हों टेम्प्लेट की गई सामग्री (जैसे ग्रिड या किसी श्रेणी से संबंधित वस्तुओं की सूची) - यह आमतौर पर एक अच्छा विचार है इसे पृष्ठों में विभाजित करें स्क्रीन पर एक बार में दिखाई देने वाली वस्तुओं की संख्या को कम करने के लिए।

इस लेख में, हम सीखेंगे कि शुरुआत से वैनिला जावास्क्रिप्ट का उपयोग करके हमारी वेब परियोजनाओं में पेजिनेशन कैसे लागू किया जाए।

इस लेख के प्रयोजन के लिए, हम सामग्री प्राप्त करेंगे इसका उदाहरण एपीआई प्रतिक्रिया। इसमें 100 डेटा बिंदु हैं, लेकिन हम केवल 30 का उपयोग करेंगे और एक समय में हमारी स्क्रीन पर 6 पोस्ट प्रदर्शित करेंगे।

Getting Started

अंतर्निहित Fetch API ब्राउज़रों का उपयोग करके 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() समारोह, हमने इस्तेमाल किया एपीआई लायें से पदों को पुनः प्राप्त करने के लिए JSON प्लेसहोल्डर पोस्ट एपीआई, फिर द्वारा संदर्भित JSON डेटा संग्रहीत करें posts चर और इस्तेमाल किया innerHTML सामग्री के प्रत्येक टुकड़े को जोड़ने के लिए संपत्ति posts-section उनके माध्यम से लूप करके।

इस बिंदु पर, हमने अपनी सभी सामग्री सफलतापूर्वक प्राप्त कर ली है।

आइए तीन वेरिएबल्स घोषित करके शुरू करें जो हमारे वेब पेज के भीतर पेजिनेशन को लागू करने के लिए महत्वपूर्ण हैं। पहला है हम प्रति पृष्ठ कितनी पोस्ट घोषित करना चाहते हैं, फिर वर्तमान पृष्ठ संख्या (1 डिफ़ॉल्ट रूप से), और पृष्ठों की कुल संख्या.

इस गाइड के लिए हम देंगे पृष्ठों की कुल संख्या की एक निश्चित संख्या 30:

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

पिछले अनुभाग में, हमने सभी पोस्ट एक ही पृष्ठ पर प्रदर्शित किए हैं, लेकिन हम एक समय में केवल छह दिखाना चाहते हैं। इसलिए, हमने सेट किया है numberPerPage सेवा मेरे 6 जिसका उपयोग अब हम लाने के संचालन को समायोजित करने के लिए करेंगे ताकि यह केवल प्रदर्शित हो 6 पोस्ट नहीं।

यह विशिष्ट कार्यान्वयन पर निर्भर करता है, लेकिन एपीआई से परिणाम प्राप्त करते समय क्वेरी पैरामीटर का उपयोग करने की अनुमति देने के लिए यह व्यापक अभ्यास है, जो आपको एक निश्चित परिणाम प्राप्त करने की अनुमति देता है पृष्ठ परिणाम के। उदाहरण के लिए नकली 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();

उपरोक्त कोड में, हमने एपीआई एंडपॉइंट में दो पैरामीटर जोड़े हैं जो हैं 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); }
});

निष्कर्ष

जब भी आप अपने वेब एप्लिकेशन पर डेटाबेस या किसी अन्य डेटा स्रोत को प्रदर्शित करने का प्रयास करते हैं, तो सामग्री को छोटे, अधिक प्रबंधनीय हिस्सों में अलग-अलग प्रदर्शित करना महत्वपूर्ण होता है।

इस लेख में, हमने बिना किसी बाहरी लाइब्रेरी और टूल के जावास्क्रिप्ट के साथ पेजिनेशन को स्क्रैच से लागू करने के तरीके पर एक नज़र डाली।

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://stackabuse.com/pagination-in-vanilla-javascript/