Implementacija paginacije za dinamične podatke AJAX z JavaScript/jQuery

1. rešitev: Preprosto ostranjevanje na osnovi AJAX z jQuery

Ta rešitev prikazuje osnovni pristop jQuery in AJAX za dinamično nalaganje podatkov in implementacijo označevanja strani za seznam zaposlenih.

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

Rešitev 2: Modularno ostranjevanje z JavaScriptom in AJAX

Ta rešitev prikazuje modularni pristop JavaScript z ločenimi funkcijami za boljšo ponovno uporabo, obravnavanje razvrščanja, iskanja in označevanja strani z uporabo 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);
        }
    }
});

Pogosta vprašanja o označevanju strani in predpomnjenju AJAX

1. Kako deluje predpomnjenje na strani odjemalca s paginacijo?
2. Predpomnjenje na strani odjemalca deluje tako, da podatke shrani lokalno po prvem pridobivanju z uporabo localStorage ali spremenljivko JavaScript. To odpravlja potrebo po poznejših klicih AJAX pri ostranjenju podatkov.
3. Kakšne so prednosti predpomnjenja na strani odjemalca pri paginaciji AJAX?
4. Predpomnjenje na strani odjemalca izboljša zmogljivost z zmanjšanjem obremenitve strežnika in hitrejšim krmarjenjem po straneh. Podatki se pridobijo enkrat in shranijo lokalno, kar izboljša uporabniško izkušnjo pri preklapljanju med stranmi ali uporabi filtrov.
5. Ali je mogoče predpomnjene podatke uporabiti za iskanje in razvrščanje?
6. Da, ko so podatki predpomnjeni, jih je mogoče uporabiti za filtering in sorting lokalno brez dodatnih zahtev strežnika. Posledica tega je hitrejši in bolj odziven vmesnik za uporabnike.
7. Ali je predpomnjenje primerno za pogosto spreminjajoče se nabore podatkov?
8. Predpomnjenje je najučinkovitejše za nize podatkov, ki se redko spreminjajo. Za dinamične nabore podatkov je še vedno mogoče uporabiti predpomnjenje, vendar ga bo treba redno osveževati ali ob določenih sprožilcih, da se zagotovi skladnost podatkov.
9. Kako počistite ali posodobite predpomnjene podatke?
10. Predpomnjene podatke je mogoče počistiti ali posodobiti tako, da jih ročno odstranite iz localStorage ali osvežitev nabora podatkov prek nove zahteve AJAX. Na primer klicanje localStorage.clear() bo izbrisal vse shranjene podatke.

Končne misli o učinkoviti obdelavi podatkov

Vključitev paginacije v dinamično pridobivanje podatkov izboljša tako zmogljivost kot uporabniško izkušnjo. Z uporabo JavaScript/jQuery je mogoče podatke razdeliti na obvladljive dele, kar uporabnikom olajša interakcijo z velikimi nabori podatkov. To skrajša čas nalaganja strani in zagotavlja nemoteno izkušnjo navigacije.

Poleg označevanja strani združevanje funkcij razvrščanja in filtriranja omogoča uporabnikom učinkovito izboljšanje iskanja. To zagotavlja, da dinamični podatki niso le lahko dostopni, ampak so tudi predstavljeni na uporabniku prijazen način. Uporaba optimizacije na strani odjemalca dodatno izboljša splošno odzivnost sistema.