वेब एप्लिकेशन बड़ी मात्रा में डेटा का प्रबंधन करते हैं। उदाहरण के लिए, ई-कॉमर्स एप्लिकेशन अरबों डेटा को इस तरह से प्रदर्शित करते हैं जो व्यवस्थित और देखने में आकर्षक दोनों है। अनिवार्य रूप से, डेटा को ऐसे तरीके से प्रस्तुत किया जाना चाहिए जो उपयोगकर्ताओं के लिए समझना और नेविगेट करना आसान हो।

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

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

क्लाइंट-साइड पेजिनेशन लागू करना

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

आप विभिन्न तकनीकों का उपयोग करके क्लाइंट-साइड पेजिनेशन लागू कर सकते हैं। इन तकनीकों में शामिल हैं:

1. पृष्ठ-आधारित पृष्ठांकन: इस पद्धति में डेटा को निश्चित आकार के खंडों या पृष्ठों में विभाजित करना शामिल है, आमतौर पर प्रति पृष्ठ एक निश्चित संख्या में आइटम प्रदर्शित करना। उपयोगकर्ता पृष्ठ संख्याओं या पिछले और अगले बटनों के साथ लेबल किए गए नेविगेशन लिंक या बटन का उपयोग करके पृष्ठों के माध्यम से नेविगेट कर सकते हैं। यह खोज इंजन और ई-कॉमर्स अनुप्रयोगों के साथ एक लोकप्रिय कार्यान्वयन है।
2. अनंत स्क्रॉल: इस पद्धति में नए डेटा को गतिशील रूप से लोड करना और प्रस्तुत करना शामिल है क्योंकि उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है, जिससे एक सहज और निरंतर ब्राउज़िंग अनुभव बनता है। यह तकनीक विशेष रूप से बड़े डेटासेट से निपटने में उपयोगी होती है जो लगातार विस्तार कर रहे हैं, जैसे कि सोशल मीडिया फ़ीड।

रिएक्ट हुक का उपयोग करके पेज-आधारित पेजिनेशन लागू करना

आरंभ करने के लिए, एक रिएक्ट प्रोजेक्ट बनाएं। आप या तो उपयोग कर सकते हैं बेसिक रिएक्ट ऐप सेट करने के लिए create-react-app जावास्क्रिप्ट कमांडस्थानीय स्तर पर या रिएक्ट प्रोजेक्ट को तैयार करने के लिए Vite का उपयोग करें आपकी मशीन पर.

इस ट्यूटोरियल में Vite का उपयोग किया गया है, आप इसमें इस प्रोजेक्ट का कोड पा सकते हैं गिटहब रिपॉजिटरी.

अपना रिएक्ट प्रोजेक्ट स्थापित करने के बाद, पेज-आधारित पेजिनेशन लागू करने के लिए आगे बढ़ें रिएक्ट हुक का उपयोग करना.

डेटासेट कॉन्फ़िगर करना

आदर्श रूप से, आप आम तौर पर डेटाबेस से डेटा लाएंगे और प्रदर्शित करेंगे। हालाँकि, इस ट्यूटोरियल के लिए, आप एक डमी से डेटा प्राप्त करेंगे JSONप्लेसहोल्डर एपीआई बजाय।

में स्रोत निर्देशिका, एक नई बनाएँ घटक/पृष्ठांकन फ़ाइल, और निम्न कोड जोड़ें।

1. एक रिएक्ट कार्यात्मक घटक बनाएं और निम्नलिखित स्थितियों को परिभाषित करें।

   आयात प्रतिक्रिया, { उपयोग प्रभाव, उपयोग राज्य } से"प्रतिक्रिया";
   आयात"./style.component.css";
   समारोहपृष्ठ पर अंक लगाना() {
   कॉन्स्ट [डेटा, सेटडेटा] = यूज़स्टेट([]);
   कॉन्स्ट [करंटपेज, सेटकरंटपेज] = यूज़स्टेट(1);
   कॉन्स्ट [itemsPerPage, setitemsPerPage] = उपयोगस्टेट(5);
   कॉन्स्ट [पेजनंबरलिमिट, सेटपेजनंबरलिमिट] = यूज़स्टेट(5);
   कॉन्स्ट [maxPageNumberLimit, setmaxPageNumberLimit] = उपयोगस्टेट(5);
   कॉन्स्ट [minPageNumberLimit, setminPageNumberLimit] = उपयोगस्टेट(0);
   वापस करना (
    <>
   
    पेजिनेशन घटक</h1> 
   >
   
    </>
    );
   }
   निर्यातगलती करना पृष्ठांकन;

2. डमी एपीआई से डेटा लाने के लिए तर्क लागू करें। के अंदर पृष्ठ पर अंक लगाना घटक, नीचे जोड़ें.

    उपयोगप्रभाव(() => {
    लाना(" https://jsonplaceholder.typicode.com/todos")
    ।तब((जवाब) => प्रतिक्रिया.json())
    ।तब((json) => सेटडेटा (json));
    }, []);
   कॉन्स्ट डिस्प्लेडेटा = (आंकड़े) => {
   वापस करना (
   
   
    {डेटा.लंबाई > 0 &&
    डेटा.मैप((कार्य करना, अनुक्रमणिका) => {
   वापस करना<लीचाबी={अनुक्रमणिका}>{todo.title}ली>;
    })}
    </ul>
    );
    };
   

   उपरोक्त कोड दो मुख्य उद्देश्यों को पूरा करता है। सबसे पहले, एक बार घटक माउंट हो जाने पर, उपयोगप्रभाव हुक बाहरी एपीआई एंडपॉइंट से डेटा लाने के लिए ट्रिगर होता है जिसे बाद में JSON प्रारूप में परिवर्तित किया जाता है। परिणामी JSON डेटा का उपयोग अद्यतन करने के लिए किया जाता है आंकड़े प्राप्त कार्यों के डेटा के साथ राज्य चर। दूसरी बात, जानकारी दिखाओ फ़ंक्शन प्राप्त डेटा को एक तर्क के रूप में लेगा और डेटा को कार्यों की एक अव्यवस्थित सूची के रूप में प्रस्तुत करेगा।
3. के रिटर्न सेगमेंट में पृष्ठ पर अंक लगाना घटक, शामिल करें जानकारी दिखाओ ब्राउज़र में प्राप्त डेटा को प्रस्तुत करने का कार्य। यहां कोड का एक अद्यतन संस्करण है:

   वापस करना (
    <>
    पेजिनेशन घटक</h1> 
   >
    {डिस्प्लेडेटा (डेटा)}
    </>
   );
   

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

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

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

यह दृष्टिकोण उपयोगकर्ताओं को अधिक प्रबंधनीय और व्यवस्थित तरीके से डेटा के माध्यम से नेविगेट करने की अनुमति देता है, जिससे एप्लिकेशन के समग्र प्रदर्शन और उपयोगकर्ता अनुभव में सुधार होता है।

प्रति पृष्ठ सीमित संख्या में आइटम प्रदर्शित करने के लिए पेजिनेशन लॉजिक लागू करना

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

इसे प्राप्त करने के लिए, आप निम्नलिखित कोड को इसमें जोड़ सकते हैं पृष्ठ पर अंक लगाना अवयव:

कॉन्स्ट पेज = [];
के लिए (होने देना मैं = 1; मैं <= गणित.ceil (डेटा.लंबाई / आइटमपेरपेज); मैं++) {
 पेज.पुश (i);
 }

उपरोक्त कोड स्निपेट, के माध्यम से पुनरावृत्त होता है आंकड़े सरणी, की लंबाई को विभाजित करके आवश्यक पृष्ठों की कुल संख्या की गणना करना आंकड़े प्रति पृष्ठ आइटमों की वांछित संख्या के आधार पर सरणी—प्रति पृष्ठ आइटमों की प्रारंभिक संख्या पांच पर सेट है आइटम प्रति पेज राज्य।

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

कॉन्स्ट IndexOfLastItem = currentPage * आइटमPerPage;
कॉन्स्ट IndexOfFirstItem = IndexOfLastItem - आइटम्सपरपेज;
कॉन्स्ट पेजआइटम = डेटा.स्लाइस (इंडेक्सऑफफर्स्टआइटम, इंडेक्सऑफलास्टआइटम);

यह कोड ब्राउज़र पेज पर रेंडर करने के लिए कार्यों को निर्धारित करता है वर्तमान पृष्ठ और आइटम प्रति पेज वेरिएबल्स-यह स्लाइस विधि का उपयोग करके डेटा सरणी से कार्यों के सेट के लिए संबंधित इंडेक्स निकालता है। फिर अनुक्रमणिका का उपयोग वांछित पृष्ठ से संबंधित विशिष्ट कार्यों को पुनः प्राप्त करने के लिए किया जाता है।

अब, कार्यों को प्रदर्शित करने के लिए, अद्यतन करें जानकारी दिखाओ को पारित करके कार्य करें पृष्ठआइटम एक पैरामीटर के रूप में. यहां कोड का एक अद्यतन संस्करण है:

वापस करना (
 <>
 पेजिनेशन घटक</h1> 
>
 {डिस्प्लेडेटा (पेजआइटम)}
 </>
);

यह अद्यतन करके, जानकारी दिखाओ फ़ंक्शन वर्तमान पृष्ठ को प्रतिबिंबित करते हुए सीमित संख्या में कार्य आइटम को उचित रूप से प्रस्तुत करेगा।

नेविगेशन बटन के साथ पेज एक्सेस और नेविगेशन को सुव्यवस्थित करना

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

सबसे पहले, आइए पृष्ठ संख्या बटनों के लिए तर्क लागू करें। में पृष्ठ पर अंक लगाना घटक, नीचे कोड जोड़ें.

कॉन्स्ट हैंडलक्लिक = (आयोजन) => {
 सेटकरंटपेज(संख्या(event.target.id));
 };
कॉन्स्ट रेंडरपेजनंबर = पेज.मैप((संख्या) => {
अगर (संख्या < maxPageNumberLimit +1 && नंबर > minPageNumberLimit) {
वापस करना (
 कुंजी={संख्या}
 आईडी={संख्या}
 ऑनक्लिक={हैंडलक्लिक}
 क्लासनाम={करंटपेज == संख्या? "सक्रिय": व्यर्थ}
 >
 {संख्या}
 </li>
 );
 } अन्य {
वापस करनाव्यर्थ;
 }
 });

हैंडलक्लिक जब कोई उपयोगकर्ता पेज नंबर बटन पर क्लिक करता है तो फ़ंक्शन ट्रिगर हो जाता है। यह क्रिया तब अद्यतन करती है वर्तमान पृष्ठ चयनित पृष्ठ संख्या के साथ राज्य चर।

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

अंत में, अगले और पिछले बटन के लिए कोड जोड़ें।

कॉन्स्ट हैंडलनेक्स्टबीटीएन = () => {
 सेटकरंटपेज (करंटपेज + 1);
अगर (वर्तमान पृष्ठ+ 1 > maxPageNumberLimit) {
 सेटमैक्सपेजनंबरलिमिट (मैक्सपेजनंबरलिमिट + पेजनंबरलिमिट);
 सेटमिनपेजनंबरलिमिट (मिनपेजनंबरलिमिट + पेजनंबरलिमिट);
 }
 };
कॉन्स्ट हैंडलPrevbtn = () => {
 सेटकरंटपेज (करंटपेज - 1);
अगर ((वर्तमान पृष्ठ - 1) % पेजनंबरलिमिट == 0) {
 सेटमैक्सपेजनंबरलिमिट (मैक्सपेजनंबरलिमिट - पेजनंबरलिमिट);
 सेटमिनपेजनंबरलिमिट (मिनपेजनंबरलिमिट - पेजनंबरलिमिट);
 }
 };

नेविगेशन बटन रेंडर करने के लिए, JSX तत्वों को निम्नानुसार अपडेट करें:

वापस करना (
 <>
 पेजिनेशन घटक</h1> 
>
 {डिस्प्लेडेटा (पेजआइटम)}
"पेज नंबर">




 onClick={handlePrevbtn}
 अक्षम={currentPage==पेज[0]? सत्य: असत्य}
 > पिछला
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 अक्षम={currentPage==पेज[पेज.लंबाई - 1]? सत्य: असत्य}
 > अगला
 </button>
 </li>
 </ul>
 </>
 );

एक बार जब घटक प्रस्तुत हो जाता है, तो यह पृष्ठ संख्या, पिछले और अगले बटन और वर्तमान पृष्ठ के लिए संबंधित डेटा आइटम प्रदर्शित करेगा।

पेजिनेशन लाइब्रेरी और कस्टम पेजिनेशन सिस्टम के बीच चयन करना

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

दूसरी ओर, रिएक्ट हुक का उपयोग करके एक कस्टम पेजिनेशन सिस्टम बनाने से पेजिनेशन लॉजिक और यूजर इंटरफेस पर अधिक लचीलापन और नियंत्रण मिलता है। निर्णय अंततः आपकी विशिष्ट आवश्यकताओं और प्राथमिकताओं पर निर्भर करेगा।