JavaScript/jQuery સાથે ડાયનેમિક AJAX ડેટા માટે પૃષ્ઠ ક્રમાંકનનું અમલીકરણ

AJAX ડેટા માટે ડાયનેમિક પૃષ્ઠ ક્રમાંકન

વેબ એપ્લિકેશન્સમાં, વપરાશકર્તા અનુભવને વધારવા માટે મોટા ડેટાસેટ્સને અસરકારક રીતે હેન્ડલ કરવું મહત્વપૂર્ણ છે. જ્યારે AJAX વિનંતીઓ દ્વારા મેળવેલા ડેટાને પ્રદર્શિત કરવાની વાત આવે છે, ત્યારે પૃષ્ઠ ક્રમાંકન એ વપરાશકર્તા ઇન્ટરફેસને સ્વચ્છ અને વ્યવસ્થિત રાખવા માટે શ્રેષ્ઠ ઉકેલો પૈકી એક છે. ડેટાને નાના હિસ્સામાં વિભાજીત કરીને, પૃષ્ઠ ક્રમાંકન વપરાશકર્તાઓને ખૂબ જ સામગ્રી સાથે પૃષ્ઠને વધુ પડતું મૂક્યા વિના વિના પ્રયાસે સૂચિમાં નેવિગેટ કરવાની મંજૂરી આપે છે.

JavaScript અને jQuery પૃષ્ઠ ક્રમાંકન લાગુ કરવા માટે શક્તિશાળી સાધનો પ્રદાન કરે છે, ખાસ કરીને જ્યારે AJAX નો ઉપયોગ કરીને સર્વરમાંથી ડેટા ગતિશીલ રીતે પુનઃપ્રાપ્ત કરવામાં આવે છે. આ તકનીકો વિકાસકર્તાઓને વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાના આધારે દરેક પૃષ્ઠ પર ડેટાનો માત્ર સબસેટ બતાવીને મોટા ડેટાસેટ્સનું સંચાલન કરવાની મંજૂરી આપે છે.

સૉર્ટિંગ, ફિલ્ટરિંગ અને શોધ કાર્યક્ષમતાઓનું એકીકરણ વપરાશકર્તા અનુભવને વધુ સમૃદ્ધ બનાવે છે. મોટા ડેટાસેટ્સની સુલભતામાં સુધારો કરવા માટે નામો અથવા વિભાગો જેવી વિશેષતાઓ પર આધારિત ડેટાને સૉર્ટ કરવો, શ્રેણીઓ દ્વારા ફિલ્ટર કરવું અને વૈશ્વિક શોધને સક્ષમ કરવી જરૂરી છે. પૃષ્ઠ ક્રમાંકન સાથે જોડાઈને, આ તકનીકો શ્રેષ્ઠ ડેટા મેનેજમેન્ટને સુનિશ્ચિત કરે છે.

આ માર્ગદર્શિકામાં, અમે JavaScript/jQuery નો ઉપયોગ કરીને ગતિશીલ રીતે મેળવેલા ડેટાસેટ પર પૃષ્ઠ ક્રમાંકન કેવી રીતે અમલમાં મૂકવું તે વિશે અન્વેષણ કરીશું, જે તમને ડેટા પ્રદર્શનને વધુ અસરકારક રીતે નિયંત્રિત કરવા માટે ઉકેલ પ્રદાન કરશે. અમે સંભવિત મુદ્દાઓ પર પણ ચર્ચા કરીશું, જેમ કે ફિલ્ટર્સને એકીકૃત કરવા, સૉર્ટ કરવા અને ભૂલોને નિયંત્રિત કરવા, મોટા ડેટાસેટ્સનું સંચાલન કરવા માટે એક વ્યાપક અભિગમ ઓફર કરે છે.

JavaScript/jQuery માં AJAX સાથે પૃષ્ઠ ક્રમાંકન અને સૉર્ટિંગને સમજવું

ઉપરોક્ત આપવામાં આવેલી સ્ક્રિપ્ટ્સનો ઉદ્દેશ્ય ઉપયોગ કરીને મોટા ડેટાસેટ્સને અસરકારક રીતે પ્રદર્શિત કરવાની સમસ્યાને હલ કરવાનો છે. પૃષ્ઠ ક્રમાંકન અને સાથે ડાયનેમિક ડેટા આનયન 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 રીઅલ-ટાઇમ અપડેટ્સ માટે, બીજું નિર્ણાયક પાસું ક્લાયંટ-સાઇડ કેશીંગનો ઉપયોગ કરીને પ્રદર્શનને વધારવું છે. આ પદ્ધતિમાં પુનરાવર્તિત સર્વર વિનંતીઓની જરૂરિયાત ઘટાડવા માટે ક્લાયંટ બાજુ પર ડેટાનો એક ભાગ સાચવવાનો સમાવેશ થાય છે. કેશીંગ સાથે, એકવાર ડેટા AJAX દ્વારા મેળવ્યા પછી, તેને સ્થાનિક મેમરી અથવા બ્રાઉઝર સ્ટોરેજમાં સંગ્રહિત કરી શકાય છે, જ્યારે વપરાશકર્તાઓ પૃષ્ઠો અથવા ફિલ્ટર વચ્ચે નેવિગેટ કરે ત્યારે વધુ ઝડપી અનુગામી ઍક્સેસ માટે પરવાનગી આપે છે. આ સર્વર લોડ ઘટાડે છે અને પૃષ્ઠ ક્રમાંકન સિસ્ટમની પ્રતિભાવને નોંધપાત્ર રીતે સુધારે છે.

જ્યારે ડેટાસેટ મોટો હોય અને અવારનવાર બદલાતો હોય ત્યારે કેશીંગનો અમલ ખાસ કરીને ઉપયોગી થઈ શકે છે. ઉદાહરણ તરીકે, તમે એકવાર તમામ ડેટા મેળવી શકો છો, JavaScript વેરીએબલ્સનો ઉપયોગ કરીને તેને સ્થાનિક રીતે સ્ટોર કરી શકો છો અથવા સ્થાનિક સંગ્રહ, અને પછી તેને કેશ્ડ ડેટામાંથી પૃષ્ઠ ક્રમાંકિત કરો. આ વ્યૂહરચના સરળ અનુભવ પ્રદાન કરે છે કારણ કે પૃષ્ઠોને સ્વિચ કરવા અથવા ફિલ્ટર્સ લાગુ કરવા માટે હવે નવી સર્વર વિનંતીઓની જરૂર રહેશે નહીં. તેના બદલે, ડેટાને સ્થાનિક કેશમાંથી પુનઃપ્રાપ્ત કરવામાં આવે છે, પ્રક્રિયા કરવામાં આવે છે અને લગભગ તરત જ રેન્ડર કરવામાં આવે છે.

તદુપરાંત, કેશીંગને અન્ય ગતિશીલ સુવિધાઓ સાથે પણ જોડી શકાય છે જેમ કે ફિલ્ટર્સ શોધો અને વર્ગીકરણ. એકવાર ડેટા કેશ થઈ જાય પછી, ફિલ્ટર્સ અને સૉર્ટિંગ સીધા કેશ્ડ ડેટાસેટ પર લાગુ કરી શકાય છે. આ રીતે, વપરાશકર્તાઓ સર્વરમાંથી ડેટાને ફરીથી લાવવાની જરૂર વગર વિભાગ, નામ અથવા અન્ય વિશેષતાઓ દ્વારા કર્મચારીઓને ફિલ્ટર કરી શકે છે. કેશીંગને અમલમાં મૂકવાથી બેન્ડવિડ્થનો વપરાશ ઓછો થાય છે અને નેટવર્ક લેટન્સી એક ચિંતાનો વિષય હોય તેવા કિસ્સાઓમાં અત્યંત ફાયદાકારક બની શકે છે, જે સીમલેસ બ્રાઉઝિંગ અનુભવ પ્રદાન કરે છે.

અમલ કરવા પૃષ્ઠ ક્રમાંકન મારફતે મેળવેલ ડેટા સૂચિમાં AJAX, JavaScript અને jQuery નો અસરકારક રીતે ઉપયોગ કરી શકાય છે. સૉર્ટિંગ અને ફિલ્ટરિંગ જેવી સુવિધાઓને જોડીને, વપરાશકર્તાઓ મોટા ડેટાસેટ્સનું અસરકારક રીતે સંચાલન કરી શકે છે. આ પદ્ધતિ ડેટાને નાના પેજમાં વિભાજિત કરે છે, જે વપરાશકર્તાઓને ઈન્ટરફેસને વધુ પડતો મૂક્યા વિના વિવિધ વિભાગોમાં નેવિગેટ કરવાની મંજૂરી આપે છે. વધુમાં, ક્લાયંટ-સાઇડ તકનીકોનો સમાવેશ કરીને, બંનેને ઑપ્ટિમાઇઝ કરીને પ્રદર્શનને વધારવું શક્ય છે શોધ અને લોડ સમય.