Dinaminių AJAX duomenų puslapių puslapiavimo diegimas naudojant „JavaScript“ / „jQuery“.

1 sprendimas: paprastas AJAX puslapių kūrimas naudojant „jQuery“.

Šis sprendimas demonstruoja pagrindinį „jQuery“ ir AJAX metodą, leidžiantį dinamiškai įkelti duomenis ir įgyvendinti darbuotojų sąrašo puslapius.

// 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 sprendimas: modulinis puslapių kūrimas naudojant JavaScript ir AJAX

Šis sprendimas demonstruoja modulinį „JavaScript“ metodą su atskirtomis funkcijomis, kad būtų lengviau pakartotinai naudoti, tvarkyti rūšiavimą, paiešką ir puslapių rūšiavimą naudojant 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);
        }
    }
});

Dažni klausimai apie AJAX puslapių spausdinimą ir kaupimą talpykloje

1. Kaip veikia kliento talpyklos kaupimas naudojant puslapius?
2. Kliento pusės talpyklos kaupimas veikia išsaugodamas duomenis vietoje po pirmojo gavimo localStorage arba JavaScript kintamasis. Tai pašalina tolesnių AJAX iškvietimų poreikį, kai puslapiais renkami duomenys.
3. Kokie yra kliento talpyklos kaupimo AJAX puslapiuose privalumai?
4. Kliento pusės talpyklos kaupimas pagerina našumą, nes sumažina serverio apkrovą ir pagreitina puslapio naršymą. Duomenys gaunami vieną kartą ir išsaugomi vietoje, o tai pagerina vartotojo patirtį perjungiant puslapius arba pritaikant filtrus.
5. Ar talpykloje saugomus duomenis galima naudoti paieškai ir rūšiavimui?
6. Taip, kai duomenys yra talpykloje, jie gali būti naudojami filtering ir sorting vietoje be papildomų serverio užklausų. Tai lemia greitesnę ir labiau reaguojančią vartotojo sąsają.
7. Ar talpyklos kaupimas tinka dažnai keičiamiems duomenų rinkiniams?
8. Talpyklos kaupimas yra efektyviausias duomenų rinkiniams, kurie keičiasi retai. Dinaminiams duomenų rinkiniams vis tiek galima naudoti talpyklą, tačiau norint užtikrinti duomenų nuoseklumą, ją reikės periodiškai arba naudojant konkrečius aktyviklius atnaujinti.
9. Kaip išvalyti arba atnaujinti talpyklos duomenis?
10. Talpykloje saugomus duomenis galima išvalyti arba atnaujinti rankiniu būdu pašalinus juos iš localStorage arba duomenų rinkinio atnaujinimas naudojant naują AJAX užklausą. Pavyzdžiui, skambinti localStorage.clear() išvalys visus saugomus duomenis.

Paskutinės mintys apie veiksmingą duomenų tvarkymą

Puslapių rūšiavimo įtraukimas į dinaminį duomenų gavimą pagerina našumą ir vartotojo patirtį. Naudojant „JavaScript“ / „jQuery“, duomenis galima suskirstyti į valdomus gabalus, todėl vartotojams bus lengviau bendrauti su dideliais duomenų rinkiniais. Tai sumažina puslapio įkėlimo laiką ir užtikrina sklandų naršymą.

Be puslapių rūšiavimo, derinant rūšiavimo ir filtravimo funkcijas, vartotojai gali efektyviai patikslinti paiešką. Tai užtikrina, kad dinaminiai duomenys būtų ne tik lengvai pasiekiami, bet ir pateikiami patogiai. Kliento pusės optimizavimas dar labiau pagerina bendrą sistemos reagavimą.