इस उपयोगी लाइब्रेरी के साथ पेजिनेशन के पीछे की मुख्य अवधारणाओं में महारत हासिल करें।

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

इस नमूना प्रोजेक्ट के साथ तकनीक के बारे में जानें और इसे Vue में कैसे लागू करें।

Vue-Awesome-Paginate के साथ शुरुआत करना

व्यू-अद्भुत-पृष्ठांकन एक शक्तिशाली और हल्की Vue पेजिनेशन लाइब्रेरी है जो पेजिनेटेड डेटा डिस्प्ले बनाने की प्रक्रिया को सरल बनाती है। यह अनुकूलन योग्य घटकों, उपयोग में आसान एपीआई और विभिन्न पृष्ठांकन परिदृश्यों के लिए समर्थन सहित व्यापक सुविधाएँ प्रदान करता है।

Vue-awesome-paginate का उपयोग शुरू करने के लिए, अपनी प्रोजेक्ट निर्देशिका में इस टर्मिनल कमांड को चलाकर पैकेज स्थापित करें:

npm install vue-awesome-paginate

फिर, अपने Vue एप्लिकेशन में काम करने के लिए पैकेज को कॉन्फ़िगर करने के लिए, नीचे दिए गए कोड को कॉपी करें src/main.js फ़ाइल:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";


import"vue-awesome-paginate/dist/style.css";





instagram viewer

createApp(App).use(VueAwesomePaginate).mount("#app");

यह कोड पैकेज को आयात और पंजीकृत करता है ।उपयोग() विधि, ताकि आप इसे अपने एप्लिकेशन में कहीं भी उपयोग कर सकें। पेजिनेशन पैकेज एक सीएसएस फ़ाइल के साथ आता है, जिसे कोड ब्लॉक भी आयात करता है।

टेस्ट व्यू एप्लिकेशन का निर्माण

यह बताने के लिए कि Vue-awesome-paginate पैकेज कैसे काम करता है, आप एक Vue ऐप बनाएंगे जो एक नमूना डेटासेट प्रदर्शित करता है। आप Axios के साथ API से डेटा लाया जा रहा है इस ऐप के लिए.

नीचे दिए गए कोड ब्लॉक को अपने में कॉपी करें ऐप.व्यू फ़ाइल:

<scriptsetup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);


const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`,
 );


 return response.data.map((comment) => comment.body);
 } catch (error) {
 console.error(error);
 }
};


onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

यह कोड ब्लॉक उपयोग करता है Vue संरचना एपीआई एक घटक बनाने के लिए. घटक Vue द्वारा माउंट करने से पहले JSONPlacefolder API से टिप्पणियाँ लाने के लिए Axios का उपयोग करता है (onBeforeMount अंकुश)। इसके बाद यह टिप्पणियों को इसमें संग्रहीत करता है टिप्पणियाँ सरणी, उन्हें प्रदर्शित करने के लिए टेम्पलेट का उपयोग करना या टिप्पणियाँ उपलब्ध होने तक एक लोडिंग संदेश।

अपने Vue ऐप में Vue-Awesome-Paginate को एकीकृत करना

अब आपके पास एक सरल Vue ऐप है जो API से डेटा प्राप्त करता है, आप इसे vue-awesome-paginate पैकेज को एकीकृत करने के लिए संशोधित कर सकते हैं। आप टिप्पणियों को विभिन्न पृष्ठों में विभाजित करने के लिए इस पेजिनेशन सुविधा का उपयोग करेंगे।

प्रतिस्थापित करें लिखी हुई कहानी आपका अनुभाग ऐप.व्यू इस कोड के साथ फ़ाइल करें:

<scriptsetup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);


const onClickHandler = (page) => {
 console.log(page);
};


const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`
 );


 return response.data.map(comment => comment.body);
 } catch (error) {
 console.error(error);
 }
};


onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
const displayedComments = computed(() => {
 const startIndex = (currentPage.value * perPage.value) - perPage.value;
 const endIndex = startIndex + perPage.value;
 return comments.value.slice(startIndex, endIndex);
});
script>

यह कोड ब्लॉक दो और प्रतिक्रियाशील संदर्भ जोड़ता है: प्रति पृष्ठ और वर्तमान पृष्ठ. ये संदर्भ क्रमशः प्रति पृष्ठ प्रदर्शित होने वाली वस्तुओं की संख्या और वर्तमान पृष्ठ संख्या संग्रहीत करते हैं।

कोड नाम का एक परिकलित रेफरी भी बनाता है प्रदर्शित टिप्पणियाँ. इसके आधार पर टिप्पणियों की श्रेणी की गणना की जाती है वर्तमान पृष्ठ और प्रति पृष्ठ मूल्य. यह का एक टुकड़ा लौटाता है टिप्पणियाँ उस सीमा के भीतर सरणी, जो टिप्पणियों को विभिन्न पृष्ठों पर समूहित करेगी।

अब, प्रतिस्थापित करें खाका आपकी App.vue फ़ाइल का अनुभाग निम्नलिखित के साथ:

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in displayedComments"class="comment">
<p>{{ comment }}p>
div>
<vue-awesome-paginate
 :total-items="comments.length"
 :items-per-page="perPage"
 :max-pages-shown="5"
 v-model="currentPage"
 :onclick="onClickHandler"
 />
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

वी-के लिए सूचियाँ प्रस्तुत करने के लिए विशेषता इस टेम्पलेट अनुभाग में इंगित करता है प्रदर्शित टिप्पणियाँ सरणी. टेम्प्लेट जोड़ता है व्यू-अद्भुत-पृष्ठांकन घटक, जिसे ऊपर दिया गया स्निपेट प्रॉप्स पास करता है। आप पैकेज के अधिकारी में इनके बारे में और अतिरिक्त प्रॉप्स के बारे में अधिक जान सकते हैं GitHub पर दस्तावेज़ीकरण.

अपने एप्लिकेशन को स्टाइल करने के बाद, आपको एक पेज मिलना चाहिए जो इस तरह दिखता है:

प्रत्येक क्रमांकित बटन पर क्लिक करें, और आपको टिप्पणियों का एक अलग सेट दिखाई देगा।

बेहतर डेटा ब्राउज़िंग के लिए पेजिनेशन या अनंत स्क्रॉलिंग का उपयोग करें

अब आपके पास एक बहुत ही बुनियादी Vue ऐप है जो दर्शाता है कि डेटा को कुशलतापूर्वक पेजिनेट कैसे किया जाए। आप अपने एप्लिकेशन में लंबे डेटा सेट को संभालने के लिए अनंत स्क्रॉलिंग का भी उपयोग कर सकते हैं। सुनिश्चित करें कि आप चुनने से पहले अपने ऐप की ज़रूरतों पर विचार करें, क्योंकि पेजिनेशन और अनंत स्क्रॉलिंग के फायदे और नुकसान हैं।