जावास्क्रिप्ट/jQuery के साथ डायनामिक AJAX डेटा के लिए पेजिनेशन लागू करना

AJAX डेटा के लिए डायनामिक पेजिनेशन

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

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

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

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

आज्ञा	उपयोग का उदाहरण
slice()	var पृष्ठांकितडेटा = डेटा.स्लाइस (प्रारंभ, अंत);इस कमांड का उपयोग किसी ऐरे के एक सेक्शन को निकालने के लिए किया जाता है। इस उदाहरण में, वर्तमान पृष्ठ पर प्रदर्शित करने के लिए कर्मचारियों के एक सबसेट का चयन करके डेटा को पृष्ठांकित करने के लिए इसका उपयोग किया जाता है।
Math.ceil()	var totalPages = Math.ceil(totalItems / itemPerPage);यह किसी संख्या को निकटतम पूर्णांक तक पूर्णांकित करता है। प्रति पृष्ठ आइटम के आधार पर सभी डेटा को समायोजित करने के लिए आवश्यक पृष्ठों की सटीक संख्या निर्धारित करने के लिए पेजिनेशन के लिए यह महत्वपूर्ण है।
innerHTML	कंटेनर.इनरHTML = '';यह कमांड किसी तत्व की HTML सामग्री में सीधे हेरफेर करता है। इसका उपयोग यहां चयनित पृष्ठ के लिए कर्मचारियों के नए सेट को प्रस्तुत करने से पहले कर्मचारी कंटेनर को साफ़ करने के लिए किया जाता है।
appendChild()	कंटेनर.एपेंड चाइल्ड(कार्ड);इस कमांड का उपयोग किसी कंटेनर में एक नया तत्व (कार्ड) जोड़ने के लिए किया जाता है। यह वर्तमान पृष्ठ के लिए कर्मचारी कार्ड को गतिशील रूप से बनाने और प्रदर्शित करने की प्रक्रिया का हिस्सा है।
addEventListener()	pageBtn.addEventListener('क्लिक', फ़ंक्शन() {...});यह कमांड किसी तत्व पर एक निर्दिष्ट घटना (उदाहरण के लिए, एक क्लिक) को सुनता है। यहां, यह पेजिनेशन बटन को उपयोगकर्ता के क्लिक पर प्रतिक्रिया करने की अनुमति देता है, जिससे पेज रेंडरिंग शुरू हो जाती है।
forEach()	paginatedData.forEach(function(कर्मचारी) {...});यह आदेश प्रत्येक तत्व पर एक फ़ंक्शन निष्पादित करते हुए, कर्मचारियों की श्रृंखला पर पुनरावृत्ति करता है। प्रत्येक कर्मचारी की प्रोफ़ाइल को पृष्ठांकित डेटा में प्रस्तुत करना महत्वपूर्ण है।
fetch()	फ़ेच('./assets/employeeDirectory.json')फ़ेच कमांड अतुल्यकालिक रूप से डेटा पुनर्प्राप्त करने के लिए एक HTTP अनुरोध शुरू करता है। यहां, इसका उपयोग AJAX के माध्यम से JSON फ़ाइल से कर्मचारी डेटा लोड करने के लिए किया जाता है।
on()	$('#पेजिनेशन ली').ऑन('क्लिक', फंक्शन() {...});यह jQuery कमांड इवेंट हैंडलर को तत्वों से जोड़ता है। इस उदाहरण में, यह उपयोगकर्ता को विभिन्न पेज नंबरों पर क्लिक करने और संबंधित डेटा लोड करने की अनुमति देकर पेजिनेशन को सक्षम बनाता है।

जावास्क्रिप्ट/jQuery में AJAX के साथ पेजिनेशन और सॉर्टिंग को समझना

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

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

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

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

// Fetch data and implement pagination
$(document).ready(function() {
    var jsonData = [];
    var itemsPerPage = 8;
    var currentPage = 1;

    // Fetch employee data using AJAX
    $.ajax({
        url: './assets/employeeDirectory.json',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            jsonData = data;
            renderPage(jsonData, currentPage);
        },
        error: function() {
            alert('Failed to load data.');
        }
    });

    // Function to render employee data on the current page
    function renderPage(data, page) {
        var container = $('#profileContainer');
        container.empty();
        var start = (page - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        var paginatedData = data.slice(start, end);

        paginatedData.forEach(function(employee) {
            var cardHtml = '<div class="card">' +
                '' +
                '<p>' + employee.department + '</p>' +
                '</div>';
            container.append(cardHtml);
        });

        updatePaginationButtons(data.length, page);
    }

    // Function to update pagination buttons
    function updatePaginationButtons(totalItems, currentPage) {
        var totalPages = Math.ceil(totalItems / itemsPerPage);
        $('#pagination').empty();

        for (var i = 1; i <= totalPages; i++) {
            $('#pagination').append('<li>' + i + '</li>');
        }

        $('#pagination li').on('click', function() {
            var page = $(this).text();
            currentPage = parseInt(page);
            renderPage(jsonData, currentPage);
        });
    }
});

// Fetch data and initialize pagination, sorting, and filtering
document.addEventListener('DOMContentLoaded', function() {
    var jsonData = [];
    var itemsPerPage = 8;
    var currentPage = 1;

    // Fetch employee data using AJAX
    fetch('./assets/employeeDirectory.json')
        .then(response => response.json())
        .then(data => {
            jsonData = data;
            renderPage(jsonData, currentPage);
        })
        .catch(() => alert('Failed to load data'));

    // Render the page with pagination
    function renderPage(data, page) {
        var container = document.getElementById('profileContainer');
        container.innerHTML = '';
        var start = (page - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        var paginatedData = data.slice(start, end);

        paginatedData.forEach(function(employee) {
            var card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = '' +
                            '<p>' + employee.department + '</p>';
            container.appendChild(card);
        });

        updatePaginationButtons(data.length, page);
    }

    // Function to create pagination controls
    function updatePaginationButtons(totalItems, currentPage) {
        var totalPages = Math.ceil(totalItems / itemsPerPage);
        var pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

        for (let i = 1; i <= totalPages; i++) {
            let pageBtn = document.createElement('li');
            pageBtn.innerText = i;
            pageBtn.addEventListener('click', function() {
                currentPage = i;
                renderPage(jsonData, currentPage);
            });
            pagination.appendChild(pageBtn);
        }
    }
});

क्लाइंट-साइड कैशिंग के साथ पेजिनेशन बढ़ाना

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

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

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

1. पेजिनेशन के साथ क्लाइंट-साइड कैशिंग कैसे काम करती है?
2. क्लाइंट-साइड कैशिंग पहले फ़ेच उपयोग के बाद स्थानीय रूप से डेटा संग्रहीत करके काम करती है या एक जावास्क्रिप्ट वैरिएबल। यह डेटा के माध्यम से पेजिनेट करते समय बाद के AJAX कॉल की आवश्यकता को समाप्त कर देता है।
3. AJAX पेजिनेशन में क्लाइंट-साइड कैशिंग के क्या लाभ हैं?
4. क्लाइंट-साइड कैशिंग सर्वर लोड को कम करके और पेज नेविगेशन को तेज़ बनाकर प्रदर्शन में सुधार करती है। डेटा को एक बार लाया जाता है और स्थानीय रूप से संग्रहीत किया जाता है, जो पृष्ठों के बीच स्विच करने या फ़िल्टर लागू करने पर उपयोगकर्ता अनुभव को बढ़ाता है।
5. क्या कैश्ड डेटा का उपयोग खोज और सॉर्टिंग के लिए किया जा सकता है?
6. हां, एक बार डेटा कैश हो जाने पर इसका उपयोग किया जा सकता है और अतिरिक्त सर्वर अनुरोधों के बिना स्थानीय रूप से। इसके परिणामस्वरूप उपयोगकर्ताओं के लिए तेज़ और अधिक प्रतिक्रियाशील इंटरफ़ेस प्राप्त होता है।
7. क्या कैशिंग बार-बार बदलते डेटासेट के लिए उपयुक्त है?
8. कैशिंग उन डेटासेट के लिए सबसे प्रभावी है जो बार-बार बदलते हैं। गतिशील डेटासेट के लिए, कैशिंग का उपयोग अभी भी किया जा सकता है लेकिन डेटा स्थिरता सुनिश्चित करने के लिए इसे समय-समय पर या विशिष्ट ट्रिगर्स पर ताज़ा करने की आवश्यकता होगी।
9. आप कैश्ड डेटा को कैसे साफ़ या अपडेट करते हैं?
10. कैश्ड डेटा को मैन्युअल रूप से हटाकर साफ़ या अपडेट किया जा सकता है या नए AJAX अनुरोध के माध्यम से डेटासेट को ताज़ा करना। उदाहरण के लिए, कॉल करना सभी संग्रहीत डेटा साफ़ कर देगा.