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

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

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

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

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

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

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

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

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

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

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

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

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

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

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