Lapu ievietošanas ieviešana dinamiskiem AJAX datiem, izmantojot JavaScript/jQuery

1. risinājums: vienkārša lappušu veidošana uz AJAX, izmantojot jQuery

Šis risinājums demonstrē pamata jQuery un AJAX pieeju, lai dinamiski ielādētu datus un ieviestu darbinieku saraksta lappušu piešķiršanu.

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

2. risinājums: modulāra lappuse ar JavaScript un AJAX

Šis risinājums demonstrē modulāru JavaScript pieeju ar atdalītām funkcijām labākai atkārtotai izmantošanai, kārtošanai, meklēšanai un lappušu veidošanai, izmantojot AJAX.

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

Bieži uzdotie jautājumi par AJAX lappušu ievietošanu un kešatmiņu

1. Kā klienta puses kešatmiņa darbojas ar lappusi?
2. Klienta puses kešatmiņa darbojas, saglabājot datus lokāli pēc pirmās lietošanas reizes localStorage vai JavaScript mainīgais. Tas novērš vajadzību pēc turpmākiem AJAX izsaukumiem, veicot datu lappusi.
3. Kādas ir klienta puses kešatmiņas priekšrocības AJAX lappušu lapā?
4. Klienta puses kešatmiņa uzlabo veiktspēju, samazinot servera slodzi un padarot lapas navigāciju ātrāku. Dati tiek iegūti vienreiz un tiek saglabāti lokāli, kas uzlabo lietotāja pieredzi, pārslēdzoties starp lapām vai lietojot filtrus.
5. Vai kešatmiņā saglabātos datus var izmantot meklēšanai un kārtošanai?
6. Jā, kad dati ir saglabāti kešatmiņā, tos var izmantot filtering un sorting lokāli bez papildu servera pieprasījumiem. Tādējādi lietotājiem tiek nodrošināta ātrāka un atsaucīgāka saskarne.
7. Vai kešatmiņa ir piemērota bieži mainīgām datu kopām?
8. Kešatmiņa ir visefektīvākā datu kopām, kas mainās reti. Dinamiskām datu kopām joprojām var izmantot kešatmiņu, taču, lai nodrošinātu datu konsekvenci, tā periodiski vai noteiktiem aktivizētājiem būs jāatsvaidzina.
9. Kā notīrīt vai atjaunināt kešatmiņā saglabātos datus?
10. Kešatmiņā saglabātos datus var notīrīt vai atjaunināt, manuāli noņemot tos no localStorage vai datu kopas atsvaidzināšana, izmantojot jaunu AJAX pieprasījumu. Piemēram, zvanot localStorage.clear() izdzēsīs visus saglabātos datus.

Pēdējās domas par efektīvu datu apstrādi

Lapu iekļaušana dinamiskajā datu ienesē uzlabo gan veiktspēju, gan lietotāja pieredzi. Izmantojot JavaScript/jQuery, datus var sadalīt pārvaldāmās daļās, tādējādi lietotājiem atvieglojot mijiedarbību ar lielām datu kopām. Tas samazina lapas ielādes laiku un nodrošina vienmērīgu navigācijas pieredzi.

Papildus lappušu šķirošanai, kārtošanas un filtrēšanas funkciju apvienošana ļauj lietotājiem efektīvi precizēt meklēšanu. Tas nodrošina, ka dinamiskie dati ir ne tikai viegli pieejami, bet arī tiek parādīti lietotājam draudzīgā veidā. Klienta puses optimizācijas izmantošana vēl vairāk uzlabo sistēmas vispārējo reaģētspēju.