Dünaamiliste AJAX-andmete lehekülgede muutmise rakendamine JavaScripti/jQuery abil

Pagination

AJAX-i andmete dünaamiline leheküljeleht

Veebirakendustes on suurte andmekogumite tõhus käsitlemine kasutajakogemuse parandamiseks ülioluline. Kui rääkida AJAX-i päringute kaudu hangitud andmete kuvamisest, on lehekülgede otsimine üks parimaid lahendusi kasutajaliidese puhta ja hallatava hoidmiseks. Jagades andmed väiksemateks tükkideks, võimaldab lehekülgede lugemine kasutajatel loendis hõlpsalt liikuda, ilma et lehte oleks liiga palju sisu.

JavaScript ja jQuery pakuvad võimsaid tööriistu lehekülgede muutmiseks, eriti kui andmeid hangitakse serverist dünaamiliselt AJAX-i abil. Need tehnoloogiad võimaldavad arendajatel hallata suuri andmekogumeid, kuvades igal lehel ainult andmete alamhulka, mis põhineb kasutaja interaktsioonil.

Sorteerimis-, filtreerimis- ja otsingufunktsioonide integreerimine rikastab kasutajakogemust veelgi. Andmete sortimine atribuutide (nt nimed või osakonnad) põhjal, filtreerimine kategooriate järgi ja globaalse otsingu võimaldamine on suurte andmekogude juurdepääsetavuse parandamiseks hädavajalikud. Koos lehitsemisega tagavad need tehnikad optimaalse andmehalduse.

Selles juhendis uurime, kuidas rakendada JavaScripti/jQuery abil dünaamiliselt hangitud andmekogumis lehekülgede lehekülge, pakkudes teile lahendust andmete kuvamise tõhusamaks juhtimiseks. Arutame ka võimalikke probleeme, nagu filtrite integreerimine, sorteerimine ja vigade käsitlemine, pakkudes terviklikku lähenemisviisi suurte andmekogumite haldamiseks.

Käsk Kasutusnäide
slice() var paginatedData = data.slice(algus, lõpp);Seda käsku kasutatakse massiivi osa eraldamiseks. Selles näites kasutatakse seda andmete lehekülgede muutmiseks, valides praegusel lehel kuvamiseks töötajate alamhulga.
Math.ceil() var totalPages = Math.ceil(üksusi kokku / lehe kohta);See ümardab arvu ülespoole lähima täisarvuni. See on lehekülgede jagamisel kriitilise tähtsusega, et määrata lehekülgede täpne arv, mis on vajalik kõigi andmete mahutamiseks lehe üksuste põhjal.
innerHTML container.innerHTML = '';See käsk manipuleerib otseselt elemendi HTML-i sisuga. Seda kasutatakse siin töötajate konteineri tühjendamiseks enne valitud lehe uue töötajate komplekti renderdamist.
appendChild() konteiner.appendChild(kaart);Seda käsku kasutatakse konteinerisse uue elemendi (kaardi) lisamiseks. See on osa praeguse lehe töötajakaartide dünaamilise genereerimise ja kuvamise protsessist.
addEventListener() pageBtn.addEventListener('click', function() {...});See käsk kuulab elemendil määratud sündmust (nt klõpsu). Siin võimaldab see lehekülgede muutmise nuppudel reageerida kasutaja klõpsamistele, käivitades lehe renderdamise.
forEach() paginatedData.forEach(function(töötaja) {...});See käsk kordub üle töötajate massiivi, täites iga elemendi jaoks funktsiooni. See on ülioluline iga töötaja profiili kuvamiseks lehekülgedel.
fetch() fetch('./assets/employeeDirectory.json')Käsk toomine käivitab HTTP-päringu andmete asünkroonseks toomiseks. Siin kasutatakse seda töötajate andmete laadimiseks JSON-failist AJAX-i kaudu.
on() $('#pagination li').on('click', function() {...});See jQuery käsk seob elementidele sündmuste käitlejad. Selles näites võimaldab see lehekülgede vahetamist, võimaldades kasutajal klõpsata erinevatel leheküljenumbritel ja laadida vastavaid andmeid.

Lehekülgede ja sortimise mõistmine JavaScriptis/jQuerys AJAX-iga

Ülaltoodud skriptide eesmärk on lahendada suurte andmekogumite tõhusa kuvamise probleem nende kasutamise abil ja dünaamiline andmete toomine . Põhikontseptsioon seisneb töötajate loendi hankimises JSON-failist ja andmete jagamises hallatavateks osadeks, võimaldades kasutajatel nendes navigeerida ilma lehte üle koormamata. AJAX-i kasutatakse nende andmete asünkroonseks toomiseks, vältides vajadust erinevate andmelehtede vahel vahetamisel kogu leht uuesti laadida. See on jõudluse ja kasutuskogemuse säilitamiseks ülioluline.

Pärast andmete toomist on oluline renderdada praeguse lehe põhjal ainult konkreetne alamhulk. See saavutatakse kasutades funktsioon, mis eraldab osa andmemassiivist, et kuvada selle lehe jaoks sobivad töötajad. Näiteks kui töötajaid on 50 ja kasutaja valib ühe lehe kuvamise 8 üksust, kuvab skript 1. leheküljel ainult töötajaid 1–8, 2. leheküljel 9–16 jne. See lähenemisviis võimaldab kasutajal liikuda andmetes väiksemate tükkidena, parandades nii lehe laadimisaega kui ka navigeerimist.

The ise genereeritakse JavaScripti abil dünaamiliselt. Lehtede koguarv arvutatakse andmete kogupikkuse ja lehel olevate üksuste põhjal. Seda käsitletakse kasutades funktsioon, mis tagab, et kõik allesjäänud töötajad paigutatakse vajadusel lisalehele. Seejärel renderdatakse iga lehe nupp, mis võimaldab kasutajatel valida, millist lehte nad soovivad vaadata. Nendele nuppudele on kinnitatud sündmuste kuulajad, nii et klõpsamisel kuvatakse ekraanile vastav töötajate alamhulk.

Lisaks lehekülgedele võimaldavad skriptid ka ja andmetest. Kasutajad saavad töötajaid sorteerida eesnime, perekonnanime või osakonna järgi. Kui kasutaja valib rippmenüüst suvandi, järjestatakse andmed valitud atribuudi alusel ümber ja lehte värskendatakse, et kajastada neid muudatusi. Samamoodi võimaldab tähestikufilter kasutajatel klõpsata tähel, et näha töötajaid, kelle nimed algavad selle tähega. See sortimise, filtreerimise ja lehekülgede jagamise kombinatsioon loob väga dünaamilise ja kasutajasõbraliku liidese suurte andmekogumite haldamiseks.

Lahendus 1: Lihtne AJAX-põhine lehekülgede trükkimine jQueryga

See lahendus demonstreerib põhilist jQuery ja AJAX-i lähenemisviisi andmete dünaamiliseks laadimiseks ja töötajate loendi lehekülgede muutmiseks.

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

Lahendus 2: modulaarne lehekülgede loomine JavaScripti ja AJAX-iga

See lahendus demonstreerib modulaarset JavaScripti lähenemisviisi, millel on eraldatud funktsioonid parema korduvkasutatavuse, sortimise, otsimise ja lehekülgede haldamiseks AJAX-i abil.

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

Lehekülje parandamine kliendipoolse vahemällu abil

Kuigi esitatud näide keskendub serveripoolsele toomisele Reaalajas värskenduste puhul on veel üks oluline aspekt jõudluse parandamine kliendipoolse vahemälu abil. See meetod hõlmab osa andmete salvestamist kliendi poolel, et vähendada vajadust korduvate serveripäringute järele. Vahemällu salvestamise korral saab andmed pärast AJAX-i kaudu toomist salvestada kohalikku mällu või brauseri salvestusruumi, mis võimaldab kasutajatel lehtede või filtrite vahel navigeerimisel kiiremat hilisemat juurdepääsu. See vähendab serveri koormust ja parandab oluliselt lehekülgede otsimise süsteemi reageerimisvõimet.

Vahemällu salvestamine võib olla eriti kasulik, kui andmestik on suur ja muutub harva. Näiteks saate kõik andmed ühe korra tuua, salvestada need lokaalselt JavaScripti muutujate abil või ja seejärel vahetage see vahemällu salvestatud andmete põhjal. See strateegia tagab sujuvama kasutuskogemuse, kuna lehtede vahetamine või filtrite rakendamine ei nõua enam uusi serveripäringuid. Selle asemel hangitakse andmed kohalikust vahemälust, töödeldakse ja renderdatakse peaaegu kohe.

Lisaks saab vahemällu salvestamist kombineerida ka muude dünaamiliste funktsioonidega, näiteks ja sorteerimine. Kui andmed on vahemällu salvestatud, saab filtreid ja sortimist rakendada otse vahemällu salvestatud andmekogumile. Nii saavad kasutajad filtreerida töötajaid osakonna, nime või muude atribuutide järgi, ilma et oleks vaja andmeid serverist uuesti hankida. Vahemällu salvestamine vähendab ribalaiuse kasutamist ja võib olla väga kasulik juhtudel, kui võrgu latentsus on probleem, pakkudes sujuvat sirvimiskogemust.

  1. Kuidas kliendipoolne vahemällu salvestamine lehekülgede lugemisega töötab?
  2. Kliendipoolne vahemällu salvestamine toimib andmete lokaalse salvestamise teel pärast esimest laadimist või JavaScripti muutuja. See välistab andmete lehekülgede sirvimisel järgnevate AJAX-kõnede vajaduse.
  3. Mis kasu on kliendipoolsest vahemällu salvestamisest AJAX-i lehekülgedel?
  4. Kliendipoolne vahemällu salvestamine parandab jõudlust, vähendades serveri koormust ja muutes lehel navigeerimise kiiremaks. Andmed tuuakse üks kord ja salvestatakse kohapeal, mis parandab kasutajakogemust lehtede vahel vahetamisel või filtrite rakendamisel.
  5. Kas vahemällu salvestatud andmeid saab kasutada otsimiseks ja sortimiseks?
  6. Jah, kui andmed on vahemällu salvestatud, saab neid kasutada ja kohapeal ilma täiendavate serveripäringuteta. Selle tulemuseks on kasutajate jaoks kiirem ja tundlikum liides.
  7. Kas vahemällu salvestamine sobib sageli muutuvate andmekogumite jaoks?
  8. Vahemällu salvestamine on kõige tõhusam harva muutuvate andmekogumite puhul. Dünaamiliste andmekogumite puhul saab vahemällu siiski kasutada, kuid andmete järjepidevuse tagamiseks tuleb seda perioodiliselt või teatud päästikutel värskendada.
  9. Kuidas kustutate või värskendate vahemällu salvestatud andmeid?
  10. Vahemällu salvestatud andmeid saab kustutada või värskendada, eemaldades need käsitsi või andmestiku värskendamine uue AJAX-i päringu kaudu. Näiteks helistades kustutab kõik salvestatud andmed.

Viimased mõtted tõhusa andmetöötluse kohta

Lehekülgede lisamine dünaamilisse andmete toomisse parandab nii jõudlust kui ka kasutuskogemust. JavaScripti/jQuery abil saab andmeid jagada hallatavateks tükkideks, mis teeb kasutajatel suurte andmekogudega suhtlemise lihtsamaks. See vähendab lehe laadimisaega ja tagab sujuva navigeerimise.

Lisaks lehekülgede jagamisele võimaldab sortimis- ja filtreerimisfunktsioonide kombineerimine kasutajatel otsingut tõhusalt täpsustada. See tagab, et dünaamilised andmed pole mitte ainult kergesti ligipääsetavad, vaid ka kasutajasõbralikul kujul esitatavad. Kliendipoolse optimeerimise kasutamine parandab veelgi süsteemi üldist reageerimisvõimet.

  1. Annab ülevaate jQuery abil lehekülgede muutmiseks kasutatav meetod ja sisaldab töönäiteid. Täpsemalt saate uurida aadressil JavaTpoint – lehekülgede näitamise näide .
  2. Üldine dokumentatsioon ja näited AJAX-põhise dünaamilise andmete toomise kohta JavaScripti/jQuery abil leiate aadressilt jQuery AJAX-i dokumentatsioon .
  3. Filtreerimis- ja sortimisfunktsioonide rakendamise ametlikku dokumentatsiooni ja õpetusi saate vaadata aadressil MDN-i veebidokumendid – massiivi sortimine .
  4. See lehekülgede ja dünaamilise andmete filtreerimise AJAX-iga käsitlemise näide annab praktilise juhendi tõhusate veebirakenduste struktureerimiseks. Lisateavet leiate aadressilt W3Schools AJAXi õpetus .