Dünaamiliste AJAX-andmete lehekülgede muutmise rakendamine JavaScripti/jQuery abil

Lahendus 1: Lihtne AJAX-põhine lehekülgede trükkimine jQueryga

See lahendus demonstreerib põhilist jQuery ja AJAX-i lähenemisviisi andmete dünaamiliseks laadimiseks ja töötajate loendi lehekülgede muutmiseks.

// 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);
        });
    }
});

Lahendus 2: modulaarne lehekülgede loomine JavaScripti ja AJAX-iga

See lahendus demonstreerib modulaarset JavaScripti lähenemisviisi, millel on eraldatud funktsioonid parema korduvkasutatavuse, sortimise, otsimise ja lehekülgede haldamiseks AJAX-i abil.

// 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);
        }
    }
});

Levinud küsimused AJAX-i lehekülgede ja vahemällu salvestamise kohta

1. Kuidas kliendipoolne vahemällu salvestamine lehekülgede lugemisega töötab?
2. Kliendipoolne vahemällu salvestamine toimib andmete lokaalse salvestamise teel pärast esimest laadimist localStorage või JavaScripti muutuja. See välistab andmete lehekülgede sirvimisel järgnevate AJAX-kõnede vajaduse.
3. Mis kasu on kliendipoolsest vahemällu salvestamisest AJAX-i lehekülgedel?
4. Kliendipoolne vahemällu salvestamine parandab jõudlust, vähendades serveri koormust ja muutes lehel navigeerimise kiiremaks. Andmed tuuakse üks kord ja salvestatakse kohapeal, mis parandab kasutajakogemust lehtede vahel vahetamisel või filtrite rakendamisel.
5. Kas vahemällu salvestatud andmeid saab kasutada otsimiseks ja sortimiseks?
6. Jah, kui andmed on vahemällu salvestatud, saab neid kasutada filtering ja sorting kohapeal ilma täiendavate serveripäringuteta. Selle tulemuseks on kasutajate jaoks kiirem ja tundlikum liides.
7. Kas vahemällu salvestamine sobib sageli muutuvate andmekogumite jaoks?
8. Vahemällu salvestamine on kõige tõhusam harva muutuvate andmekogumite puhul. Dünaamiliste andmekogumite puhul saab vahemällu siiski kasutada, kuid andmete järjepidevuse tagamiseks tuleb seda perioodiliselt või teatud päästikutel värskendada.
9. Kuidas kustutate või värskendate vahemällu salvestatud andmeid?
10. Vahemällu salvestatud andmeid saab kustutada või värskendada, eemaldades need käsitsi localStorage või andmestiku värskendamine uue AJAX-i päringu kaudu. Näiteks helistades localStorage.clear() kustutab kõik salvestatud andmed.

Viimased mõtted tõhusa andmetöötluse kohta

Lehekülgede lisamine dünaamilisse andmete toomisse parandab nii jõudlust kui ka kasutuskogemust. JavaScripti/jQuery abil saab andmeid jagada hallatavateks tükkideks, mis teeb kasutajatel suurte andmekogudega suhtlemise lihtsamaks. See vähendab lehe laadimisaega ja tagab sujuva navigeerimise.

Lisaks lehekülgede jagamisele võimaldab sortimis- ja filtreerimisfunktsioonide kombineerimine kasutajatel otsingut tõhusalt täpsustada. See tagab, et dünaamilised andmed pole mitte ainult kergesti ligipääsetavad, vaid ka kasutajasõbralikul kujul esitatavad. Kliendipoolse optimeerimise kasutamine parandab veelgi süsteemi üldist reageerimisvõimet.