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

Dinaminis puslapių spausdinimas AJAX duomenims

Žiniatinklio programose efektyvus didelių duomenų rinkinių tvarkymas yra labai svarbus siekiant pagerinti vartotojo patirtį. Kai kalbama apie duomenų, gautų per AJAX užklausas, rodymą, puslapių numeravimas yra vienas geriausių sprendimų, kad vartotojo sąsaja būtų švari ir valdoma. Suskaidžius duomenis į mažesnes dalis, puslapių rūšiavimas leidžia vartotojams be vargo naršyti sąraše, neapkraunant puslapio per daug turinio.

„JavaScript“ ir „jQuery“ siūlo galingus puslapių rūšiavimo įrankius, ypač kai duomenys dinamiškai nuskaitomi iš serverio naudojant AJAX. Šios technologijos leidžia kūrėjams valdyti didelius duomenų rinkinius, kiekviename puslapyje rodant tik duomenų poaibį, atsižvelgiant į vartotojo sąveiką.

Rūšiavimo, filtravimo ir paieškos funkcijų integravimas dar labiau praturtina vartotojo patirtį. Duomenų rūšiavimas pagal atributus, pvz., pavadinimus ar skyrius, filtravimas pagal kategorijas ir visuotinės paieškos įgalinimas yra būtini norint pagerinti didelių duomenų rinkinių prieinamumą. Kartu su puslapių rūšiavimu šie metodai užtikrina optimalų duomenų valdymą.

Šiame vadove išnagrinėsime, kaip dinamiškai gaunamame duomenų rinkinyje įdiegti puslapių puslapius naudojant JavaScript / jQuery, kad galėtumėte efektyviau valdyti duomenų rodymą. Taip pat aptarsime galimas problemas, pvz., filtrų integravimą, rūšiavimą ir tvarkymo klaidas, siūlydami visapusišką didelių duomenų rinkinių valdymo metodą.

komandą	Naudojimo pavyzdys
slice()	var paginatedData = data.slice(pradžia, pabaiga);Ši komanda naudojama masyvo atkarpai išgauti. Šiame pavyzdyje jis naudojamas duomenims surūšiuoti pasirenkant darbuotojų poaibį, kuris bus rodomas dabartiniame puslapyje.
Math.ceil()	var totalPuslapiai = Math.ceil(totalItems / itemsPerPage);Jis apvalina skaičių iki artimiausio sveikojo skaičiaus. Tai labai svarbu norint nustatyti tikslų puslapių skaičių, reikalingą visiems duomenims, atsižvelgiant į elementus, esančius puslapyje.
innerHTML	container.innerHTML = '';Ši komanda tiesiogiai valdo elemento HTML turinį. Čia jis naudojamas darbuotojo konteineriui išvalyti prieš pateikiant naują pasirinkto puslapio darbuotojų rinkinį.
appendChild()	konteineris.appendChild(kortelė);Ši komanda naudojama naujam elementui (kortelei) pridėti prie konteinerio. Tai yra dinamiško dabartinio puslapio darbuotojų kortelių generavimo ir rodymo proceso dalis.
addEventListener()	pageBtn.addEventListener('click', function() {...});Ši komanda klausosi nurodyto įvykio (pvz., paspaudimo) ant elemento. Čia jis leidžia puslapių rūšiavimo mygtukais reaguoti į naudotojo paspaudimus ir suaktyvinti puslapio pateikimą.
forEach()	puslapiniai duomenys.forEach(funkcija(darbuotojas) {...});Ši komanda kartojasi per darbuotojų masyvą, kiekvienam elementui vykdydama funkciją. Tai labai svarbu norint pateikti kiekvieno darbuotojo profilį puslapiuose.
fetch()	fetch('./assets/employeeDirectory.json')Komanda „Ftch“ inicijuoja HTTP užklausą, kad duomenys būtų nuskaityti asinchroniškai. Čia jis naudojamas darbuotojo duomenims įkelti iš JSON failo per AJAX.
on()	$('#pagination li').on('click', function() {...});Ši jQuery komanda prideda įvykių tvarkykles prie elementų. Šiame pavyzdyje jis įgalina puslapių rūšiavimą, leisdamas vartotojui spustelėti skirtingus puslapių numerius ir įkelti atitinkamus duomenis.

Puslapių rūšiavimo ir rūšiavimo supratimas naudojant AJAX „JavaScript“ / „jQuery“.

Aukščiau pateiktais scenarijais siekiama išspręsti didelių duomenų rinkinių efektyvaus atvaizdavimo problemą naudojant ir dinaminis duomenų gavimas su . Pagrindinė koncepcija sukasi apie darbuotojų sąrašo nuskaitymą iš JSON failo ir duomenų padalijimą į tvarkomus skyrius, kad vartotojai galėtų jas naršyti neapkraunant puslapio. AJAX naudojamas šiems duomenims gauti asinchroniškai, todėl perjungiant skirtingus duomenų puslapius nereikia iš naujo įkelti viso puslapio. Tai labai svarbu norint išlaikyti našumą ir vartotojo patirtį.

Kai duomenys gaunami, labai svarbu pateikti tik konkretų poaibį pagal dabartinį puslapį. Tai pasiekiama naudojant funkcija, kuri ištraukia dalį duomenų masyvo, kad būtų rodomi atitinkami to puslapio darbuotojai. Pavyzdžiui, jei yra 50 darbuotojų ir vartotojas pasirenka peržiūrėti 8 elementus viename puslapyje, scenarijuje bus rodomi tik darbuotojai nuo 1 iki 8 1 puslapyje, nuo 9 iki 16 2 puslapyje ir pan. Šis metodas leidžia vartotojui perkelti duomenis mažesniais gabalais, pagerinant puslapio įkėlimo laiką ir naršymą.

The patys yra dinamiškai generuojami naudojant JavaScript. Bendras puslapių skaičius apskaičiuojamas pagal bendrą duomenų ilgį ir puslapyje esančius elementus. Tai tvarkoma naudojant funkcija, kuri užtikrina, kad visi likę darbuotojai prireikus būtų patalpinti į papildomą puslapį. Tada atvaizduojamas kiekvienas puslapio mygtukas, leidžiantis vartotojams pasirinkti, kurį puslapį jie nori peržiūrėti. Prie šių mygtukų yra pritvirtinti įvykių klausytojai, todėl paspaudus ekrane rodomas atitinkamas darbuotojų pogrupis.

Be puslapių, scenarijai taip pat leidžia ir duomenų. Vartotojai gali rūšiuoti darbuotojus pagal vardą, pavardę arba skyrių. Kai vartotojas išskleidžiamajame meniu pasirenka parinktį, duomenys perrikiuojami pagal pasirinktą atributą ir puslapis atnaujinamas, kad atspindėtų šiuos pakeitimus. Panašiai abėcėlės filtras leidžia vartotojams spustelėti raidę, kad pamatytų darbuotojus, kurių vardai prasideda šia raide. Šis rūšiavimo, filtravimo ir puslapių rūšiavimo derinys sukuria labai dinamišką ir patogią sąsają dideliems duomenų rinkiniams valdyti.

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

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

Puslapių spausdinimo pagerinimas naudojant kliento talpyklą

Nors pateiktame pavyzdyje dėmesys sutelkiamas į serverio iškvietimą Norint atnaujinti realiuoju laiku, kitas svarbus aspektas yra našumo didinimas naudojant kliento talpyklą. Šis metodas apima dalies duomenų išsaugojimą kliento pusėje, kad būtų sumažintas pasikartojančių serverio užklausų poreikis. Naudojant talpyklą, kai duomenys gaunami per AJAX, jie gali būti saugomi vietinėje atmintyje arba naršyklės saugykloje, todėl naudotojams naršant puslapius ar filtrus galima greičiau pasiekti. Tai sumažina serverio apkrovą ir žymiai pagerina puslapių spausdinimo sistemos reakciją.

Talpyklos įdiegimas gali būti ypač naudingas, kai duomenų rinkinys yra didelis ir keičiasi retai. Pavyzdžiui, galite gauti visus duomenis vieną kartą, saugoti juos vietoje naudodami „JavaScript“ kintamuosius arba , tada surūšiuokite jį iš talpyklos duomenų. Ši strategija užtikrina sklandesnę patirtį, nes perjungiant puslapius ar pritaikant filtrus nebereikės naujų serverio užklausų. Vietoj to, duomenys nuskaitomi iš vietinės talpyklos, apdorojami ir pateikiami beveik akimirksniu.

Be to, talpyklą taip pat galima derinti su kitomis dinaminėmis funkcijomis, tokiomis kaip ir rūšiavimas. Kai duomenys yra talpykloje, filtrus ir rūšiavimą galima pritaikyti tiesiai talpykloje saugomam duomenų rinkiniui. Tokiu būdu vartotojai gali filtruoti darbuotojus pagal skyrių, pavadinimą ar kitus požymius, nereikės iš naujo gauti duomenų iš serverio. Talpyklos įdiegimas sumažina pralaidumo naudojimą ir gali būti labai naudingas tais atvejais, kai susirūpinimą kelia tinklo delsa, užtikrinant sklandų naršymą.

1. Kaip veikia kliento talpyklos kaupimas naudojant puslapius?
2. Kliento pusės talpyklos kaupimas veikia išsaugodamas duomenis vietoje po pirmojo gavimo 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 ir 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š arba duomenų rinkinio atnaujinimas naudojant naują AJAX užklausą. Pavyzdžiui, skambinti išvalys visus saugomus duomenis.