Implementacija paginacije za dinamičke AJAX podatke s JavaScript/jQuery

Rješenje 1: Jednostavno označavanje stranica temeljeno na AJAX-u s jQueryjem

Ovo rješenje pokazuje osnovni pristup jQuery i AJAX za dinamičko učitavanje podataka i implementaciju paginacije za popis zaposlenika.

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

Rješenje 2: Modularno označavanje stranica s JavaScriptom i AJAX-om

Ovo rješenje demonstrira modularni JavaScript pristup s odvojenim funkcijama za bolju ponovnu upotrebu, rukovanje sortiranjem, pretraživanjem i označavanjem stranica pomoću AJAX-a.

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

Uobičajena pitanja o AJAX paginaciji i predmemoriji

1. Kako predmemoriranje na strani klijenta funkcionira s označavanjem stranica?
2. Predmemorija na strani klijenta funkcionira tako da podatke pohranjuje lokalno nakon prvog dohvaćanja pomoću localStorage ili JavaScript varijablu. Ovo eliminira potrebu za naknadnim AJAX pozivima prilikom paginiranja kroz podatke.
3. Koje su prednosti predmemoriranja na strani klijenta u AJAX paginaciji?
4. Predmemorija na strani klijenta poboljšava izvedbu smanjenjem opterećenja poslužitelja i bržom navigacijom stranicama. Podaci se dohvaćaju jednom i pohranjuju lokalno, što poboljšava korisničko iskustvo prilikom prebacivanja između stranica ili primjene filtara.
5. Mogu li se predmemorirani podaci koristiti za pretraživanje i sortiranje?
6. Da, kada se podaci pohrane u predmemoriju, mogu se koristiti za filtering i sorting lokalno bez dodatnih zahtjeva poslužitelja. To rezultira bržim i osjetljivijim sučeljem za korisnike.
7. Je li predmemoriranje prikladno za skupove podataka koji se često mijenjaju?
8. Predmemoriranje je najučinkovitije za skupove podataka koji se rijetko mijenjaju. Za dinamičke skupove podataka predmemorija se i dalje može koristiti, ali će se trebati povremeno osvježavati ili na određenim okidačima kako bi se osigurala dosljednost podataka.
9. Kako brišete ili ažurirate predmemorirane podatke?
10. Predmemorirani podaci mogu se izbrisati ili ažurirati ručnim uklanjanjem iz localStorage ili osvježavanje skupa podataka putem novog AJAX zahtjeva. Na primjer, pozivanje localStorage.clear() izbrisat će sve pohranjene podatke.

Završne misli o učinkovitom rukovanju podacima

Uključivanje paginacije u dinamičko dohvaćanje podataka poboljšava performanse i korisničko iskustvo. Korištenjem JavaScripta/jQueryja podaci se mogu podijeliti u dijelove kojima se može upravljati, što korisnicima olakšava interakciju s velikim skupovima podataka. Time se smanjuje vrijeme učitavanja stranice i pruža glatko iskustvo navigacije.

Uz paginaciju, kombiniranje značajki sortiranja i filtriranja omogućuje korisnicima učinkovito pročišćavanje pretraživanja. To osigurava da dinamičkim podacima nije samo lako pristupiti, već i da su predstavljeni na jednostavan način. Korištenje optimizacije na strani klijenta dodatno poboljšava ukupnu odzivnost sustava.