JavaScript/jQuery ഉപയോഗിച്ച് ഡൈനാമിക് AJAX ഡാറ്റയ്ക്കായി പേജിനേഷൻ നടപ്പിലാക്കുന്നു

AJAX ഡാറ്റയ്ക്കുള്ള ഡൈനാമിക് പേജിനേഷൻ

വെബ് ആപ്ലിക്കേഷനുകളിൽ, വലിയ ഡാറ്റാസെറ്റുകൾ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യുന്നത് ഉപയോക്തൃ അനുഭവം വർദ്ധിപ്പിക്കുന്നതിന് നിർണായകമാണ്. AJAX അഭ്യർത്ഥനകളിലൂടെ ലഭിച്ച ഡാറ്റ പ്രദർശിപ്പിക്കുമ്പോൾ, ഉപയോക്തൃ ഇൻ്റർഫേസ് വൃത്തിയുള്ളതും കൈകാര്യം ചെയ്യാവുന്നതുമായി നിലനിർത്തുന്നതിനുള്ള ഏറ്റവും മികച്ച പരിഹാരങ്ങളിലൊന്നാണ് പേജിനേഷൻ. ഡാറ്റയെ ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്നതിലൂടെ, പേജിനെ വളരെയധികം ഉള്ളടക്കമുള്ള പേജ് അടിച്ചേൽപ്പിക്കാതെ തന്നെ അനായാസമായി പട്ടികയിലൂടെ നാവിഗേറ്റ് ചെയ്യാൻ പേജിനേഷൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്നു.

JavaScript ഉം jQuery ഉം പേജിനേഷൻ നടപ്പിലാക്കുന്നതിനുള്ള ശക്തമായ ടൂളുകൾ വാഗ്ദാനം ചെയ്യുന്നു, പ്രത്യേകിച്ചും AJAX ഉപയോഗിച്ച് സെർവറിൽ നിന്ന് ഡാറ്റ ചലനാത്മകമായി വീണ്ടെടുക്കുമ്പോൾ. ഉപയോക്തൃ ഇടപെടലിനെ അടിസ്ഥാനമാക്കി ഓരോ പേജിലും ഡാറ്റയുടെ ഒരു ഉപവിഭാഗം മാത്രം കാണിച്ച് വലിയ ഡാറ്റാസെറ്റുകൾ കൈകാര്യം ചെയ്യാൻ ഈ സാങ്കേതികവിദ്യകൾ ഡെവലപ്പർമാരെ അനുവദിക്കുന്നു.

സോർട്ടിംഗ്, ഫിൽട്ടറിംഗ്, തിരയൽ പ്രവർത്തനങ്ങൾ എന്നിവ സമന്വയിപ്പിക്കുന്നത് ഉപയോക്തൃ അനുഭവത്തെ കൂടുതൽ സമ്പന്നമാക്കുന്നു. വലിയ ഡാറ്റാസെറ്റുകളുടെ പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്തുന്നതിന് പേരുകൾ അല്ലെങ്കിൽ വകുപ്പുകൾ പോലുള്ള ആട്രിബ്യൂട്ടുകളെ അടിസ്ഥാനമാക്കി ഡാറ്റ അടുക്കുക, വിഭാഗങ്ങൾ അനുസരിച്ച് ഫിൽട്ടർ ചെയ്യുക, ഒരു ആഗോള തിരയൽ പ്രവർത്തനക്ഷമമാക്കൽ എന്നിവ അത്യന്താപേക്ഷിതമാണ്. പേജിനേഷനുമായി സംയോജിപ്പിച്ച്, ഈ ടെക്നിക്കുകൾ ഒപ്റ്റിമൽ ഡാറ്റ മാനേജ്മെൻ്റ് ഉറപ്പാക്കുന്നു.

ഈ ഗൈഡിൽ, JavaScript/jQuery ഉപയോഗിച്ച് ചലനാത്മകമായി ലഭിച്ച ഒരു ഡാറ്റാസെറ്റിൽ പേജിനേഷൻ എങ്ങനെ നടപ്പിലാക്കാമെന്ന് ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, ഡാറ്റ ഡിസ്പ്ലേ കൂടുതൽ കാര്യക്ഷമമായി നിയന്ത്രിക്കുന്നതിനുള്ള ഒരു പരിഹാരം നിങ്ങൾക്ക് നൽകുന്നു. ഫിൽട്ടറുകൾ സംയോജിപ്പിക്കൽ, ക്രമപ്പെടുത്തൽ, പിശകുകൾ കൈകാര്യം ചെയ്യൽ, വലിയ ഡാറ്റാസെറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള സമഗ്രമായ സമീപനം എന്നിവ പോലുള്ള സാധ്യതയുള്ള പ്രശ്നങ്ങളും ഞങ്ങൾ ചർച്ച ചെയ്യും.

JavaScript/jQuery-ൽ AJAX ഉപയോഗിച്ച് പേജിനേഷനും സോർട്ടിംഗും മനസ്സിലാക്കുന്നു

മുകളിൽ നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ ഉപയോഗിച്ച് വലിയ ഡാറ്റാസെറ്റുകൾ കാര്യക്ഷമമായി പ്രദർശിപ്പിക്കുന്നതിനുള്ള പ്രശ്നം പരിഹരിക്കാൻ ലക്ഷ്യമിടുന്നു പേജിനേഷൻ ഒപ്പം ഡൈനാമിക് ഡാറ്റ എടുക്കൽ അജാക്സ്. ഒരു JSON ഫയലിൽ നിന്ന് ജീവനക്കാരുടെ ഒരു ലിസ്റ്റ് വീണ്ടെടുക്കുകയും ഡാറ്റ കൈകാര്യം ചെയ്യാവുന്ന വിഭാഗങ്ങളായി വിഭജിക്കുകയും ചെയ്യുന്നതിനെ ചുറ്റിപ്പറ്റിയാണ് പ്രധാന ആശയം, പേജിനെ മറികടക്കാതെ അവയിലൂടെ നാവിഗേറ്റ് ചെയ്യാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്നു. ഈ ഡാറ്റ അസമന്വിതമായി ലഭ്യമാക്കാൻ AJAX ഉപയോഗിക്കുന്നു, ഡാറ്റയുടെ വിവിധ പേജുകൾക്കിടയിൽ മാറുമ്പോൾ മുഴുവൻ പേജും വീണ്ടും ലോഡുചെയ്യേണ്ടതിൻ്റെ ആവശ്യകത തടയുന്നു. പ്രകടനവും ഉപയോക്തൃ അനുഭവവും നിലനിർത്തുന്നതിന് ഇത് നിർണായകമാണ്.

ഡാറ്റ ലഭ്യമാക്കിക്കഴിഞ്ഞാൽ, നിലവിലെ പേജിനെ അടിസ്ഥാനമാക്കി ഒരു പ്രത്യേക ഉപവിഭാഗം മാത്രം റെൻഡർ ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. ഉപയോഗിച്ചാണ് ഇത് കൈവരിക്കുന്നത് സ്ലൈസ് () ഫംഗ്‌ഷൻ, ആ പേജിന് അനുയോജ്യമായ ജീവനക്കാരെ പ്രദർശിപ്പിക്കുന്നതിന് ഡാറ്റ അറേയുടെ ഒരു ഭാഗം എക്‌സ്‌ട്രാക്റ്റുചെയ്യുന്നു. ഉദാഹരണത്തിന്, 50 ജീവനക്കാർ ഉണ്ടെങ്കിൽ, ഒരു പേജിൽ 8 ഇനങ്ങൾ കാണാൻ ഉപയോക്താവ് തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, പേജ് 1-ൽ 1-8, പേജ് 2-ൽ 9-16 എന്നിങ്ങനെയുള്ള ജീവനക്കാരെ മാത്രമേ സ്ക്രിപ്റ്റ് പ്രദർശിപ്പിക്കൂ. ഈ സമീപനം, പേജ് ലോഡ് സമയവും നാവിഗേഷനും മെച്ചപ്പെടുത്തി, ചെറിയ ഭാഗങ്ങളായി ഡാറ്റയിലൂടെ നീങ്ങാൻ ഉപയോക്താവിനെ അനുവദിക്കുന്നു.

ദി പേജിനേഷൻ നിയന്ത്രണങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് സ്വയം ചലനാത്മകമായി ജനറേറ്റുചെയ്യുന്നു. മൊത്തം ഡാറ്റാ ദൈർഘ്യവും ഓരോ പേജിലെ ഇനങ്ങളും അടിസ്ഥാനമാക്കിയാണ് പേജുകളുടെ ആകെ എണ്ണം കണക്കാക്കുന്നത്. ഉപയോഗിച്ചാണ് ഇത് കൈകാര്യം ചെയ്യുന്നത് Math.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 വഴി ഡാറ്റ ലഭ്യമാക്കിയാൽ, അത് ലോക്കൽ മെമ്മറിയിലോ ബ്രൗസർ സ്റ്റോറേജിലോ സംഭരിക്കാൻ കഴിയും, ഇത് ഉപയോക്താക്കൾ പേജുകൾക്കും ഫിൽട്ടറുകൾക്കും ഇടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ വേഗത്തിലുള്ള തുടർന്നുള്ള ആക്സസ് അനുവദിക്കുന്നു. ഇത് സെർവർ ലോഡ് കുറയ്ക്കുകയും പേജിനേഷൻ സിസ്റ്റത്തിൻ്റെ പ്രതികരണശേഷി ഗണ്യമായി മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

ഡാറ്റാസെറ്റ് വലുതും വിരളമായി മാറുമ്പോൾ കാഷിംഗ് നടപ്പിലാക്കാൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാകും. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരിക്കൽ എല്ലാ ഡാറ്റയും ലഭിക്കാൻ കഴിയും, ജാവാസ്ക്രിപ്റ്റ് വേരിയബിളുകൾ ഉപയോഗിച്ച് പ്രാദേശികമായി സംഭരിക്കുക അല്ലെങ്കിൽ പ്രാദേശിക സംഭരണം, തുടർന്ന് അത് കാഷെ ചെയ്ത ഡാറ്റയിൽ നിന്ന് പേജ് ചെയ്യുക. പേജുകൾ മാറുന്നതിനോ ഫിൽട്ടറുകൾ പ്രയോഗിക്കുന്നതിനോ ഇനി പുതിയ സെർവർ അഭ്യർത്ഥനകൾ ആവശ്യമില്ലാത്തതിനാൽ ഈ തന്ത്രം സുഗമമായ അനുഭവം നൽകുന്നു. പകരം, പ്രാദേശിക കാഷെയിൽ നിന്ന് ഡാറ്റ വീണ്ടെടുക്കുകയും പ്രോസസ്സ് ചെയ്യുകയും തൽക്ഷണം റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

മാത്രമല്ല, കാഷിംഗ് പോലുള്ള മറ്റ് ചലനാത്മക സവിശേഷതകളുമായി സംയോജിപ്പിക്കാനും കഴിയും തിരയൽ ഫിൽട്ടറുകൾ ഒപ്പം അടുക്കുന്നു. ഡാറ്റ കാഷെ ചെയ്‌തുകഴിഞ്ഞാൽ, കാഷെ ചെയ്‌ത ഡാറ്റാസെറ്റിലേക്ക് നേരിട്ട് ഫിൽട്ടറുകളും സോർട്ടിംഗും പ്രയോഗിക്കാൻ കഴിയും. ഈ രീതിയിൽ, സെർവറിൽ നിന്ന് ഡാറ്റ വീണ്ടും ലഭ്യമാക്കേണ്ട ആവശ്യമില്ലാതെ തന്നെ, ഉപയോക്താക്കൾക്ക് ഡിപ്പാർട്ട്‌മെൻ്റ്, പേര് അല്ലെങ്കിൽ മറ്റ് ആട്രിബ്യൂട്ടുകൾ അനുസരിച്ച് ജീവനക്കാരെ ഫിൽട്ടർ ചെയ്യാൻ കഴിയും. കാഷിംഗ് നടപ്പിലാക്കുന്നത് ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗം കുറയ്ക്കുന്നു, കൂടാതെ നെറ്റ്‌വർക്ക് ലേറ്റൻസി ഒരു പ്രശ്‌നമുള്ള സന്ദർഭങ്ങളിൽ ഇത് വളരെ പ്രയോജനപ്രദമാകും, ഇത് തടസ്സമില്ലാത്ത ബ്രൗസിംഗ് അനുഭവം നൽകുന്നു.

നടപ്പിലാക്കാൻ പേജിനേഷൻ വഴി ലഭിച്ച ഒരു ഡാറ്റ ലിസ്റ്റിൽ അജാക്സ്, JavaScript, jQuery എന്നിവ ഫലപ്രദമായി ഉപയോഗിക്കാനാകും. സോർട്ടിംഗും ഫിൽട്ടറിംഗും പോലുള്ള സവിശേഷതകൾ സംയോജിപ്പിക്കുന്നതിലൂടെ, ഉപയോക്താക്കൾക്ക് വലിയ ഡാറ്റാസെറ്റുകൾ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ കഴിയും. ഈ രീതി ഡാറ്റയെ ചെറിയ പേജുകളായി വിഭജിക്കുന്നു, ഇത് ഉപയോക്താക്കൾക്ക് ഇൻ്റർഫേസ് അമിതമാക്കാതെ വിവിധ വിഭാഗങ്ങളിലൂടെ നാവിഗേറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു. കൂടാതെ, ക്ലയൻ്റ് സൈഡ് ടെക്നിക്കുകൾ സംയോജിപ്പിച്ച്, രണ്ടും ഒപ്റ്റിമൈസ് ചെയ്തുകൊണ്ട് പ്രകടനം മെച്ചപ്പെടുത്താൻ സാധിക്കും തിരയുക ലോഡ് സമയവും.