Lapozás megvalósítása dinamikus AJAX adatokhoz JavaScript/jQuery segítségével

Dinamikus lapozás az AJAX adatokhoz

A webalkalmazásokban a nagy adatkészletek hatékony kezelése kulcsfontosságú a felhasználói élmény javítása szempontjából. Ha az AJAX-kérelmeken keresztül beolvasott adatok megjelenítéséről van szó, a lapozás az egyik legjobb megoldás a felhasználói felület tisztán tartására és kezelhetőségére. Az adatok kisebb részekre bontásával a lapozás lehetővé teszi a felhasználók számára, hogy könnyedén navigálhassanak a listában anélkül, hogy túl sok tartalommal terhelnék meg az oldalt.

A JavaScript és a jQuery hatékony eszközöket kínál a lapozás megvalósításához, különösen akkor, ha az adatok dinamikusan kerülnek lekérésre a szerverről AJAX használatával. Ezek a technológiák lehetővé teszik a fejlesztők számára, hogy nagy adatkészleteket kezeljenek úgy, hogy az egyes oldalakon a felhasználói interakció alapján csak az adatok egy részét jelenítik meg.

A rendezési, szűrési és keresési funkciók integrálása tovább gazdagítja a felhasználói élményt. Az adatok attribútumok, például nevek vagy részlegek alapján történő rendezése, kategóriák szerinti szűrés és a globális keresés engedélyezése elengedhetetlen a nagy adatkészletek hozzáférhetőségének javításához. Az oldalszámozással kombinálva ezek a technikák optimális adatkezelést biztosítanak.

Ebben az útmutatóban megvizsgáljuk, hogyan valósíthat meg oldalszámozást egy dinamikusan lehívott adatkészleten JavaScript/jQuery használatával, és megoldást kínál az adatok megjelenítésének hatékonyabb szabályozására. Megvitatjuk a lehetséges problémákat is, például a szűrők integrálását, a rendezést és a hibák kezelését, átfogó megközelítést kínálva a nagy adatkészletek kezeléséhez.

Parancs	Használati példa
slice()	var lapozottAdat = data.slice(kezdet, vége);Ez a parancs egy tömb egy részének kibontására szolgál. Ebben a példában az adatok oldalszámozására szolgál az alkalmazottak egy részhalmazának kiválasztása az aktuális oldalon való megjelenítéshez.
Math.ceil()	var totalPages = Math.ceil(totalItems / itemsPerPage);Egy számot felfelé kerekít a legközelebbi egész számra. Ez kritikus fontosságú az oldalszámozáshoz, hogy az oldalankénti tételek alapján meghatározható legyen az összes adat befogadásához szükséges oldalak pontos száma.
innerHTML	container.innerHTML = '';Ez a parancs közvetlenül manipulálja egy elem HTML-tartalmát. Itt az alkalmazottak tárolójának törlésére szolgál, mielőtt az új alkalmazottkészletet rendereli a kiválasztott oldalhoz.
appendChild()	konténer.appendChild(kártya);Ezzel a paranccsal új elemet (kártyát) lehet hozzáfűzni egy tárolóhoz. Ez része az aktuális oldal alkalmazotti kártyáinak dinamikus generálásának és megjelenítésének.
addEventListener()	pageBtn.addEventListener('kattintás', function() {...});Ez a parancs egy adott eseményre (például egy kattintásra) figyel egy elemen. Itt lehetővé teszi, hogy az oldalszámozási gombok reagáljanak a felhasználói kattintásokra, elindítva az oldal megjelenítését.
forEach()	oldalszámozottadat.forEach(függvény(alkalmazott) {...});Ez a parancs ismétlődik az alkalmazottak tömbjén, és minden elemen végrehajt egy funkciót. Létfontosságú az egyes alkalmazottak profiljának megjelenítéséhez az oldalszámozott adatokban.
fetch()	fetch('./assets/employeeDirectory.json')A fetch parancs HTTP kérést kezdeményez az adatok aszinkron lekérésére. Itt az alkalmazottak adatainak betöltésére szolgál egy JSON-fájlból AJAX-on keresztül.
on()	$('#oldalszámozás li').on('kattintás', function() {...});Ez a jQuery parancs eseménykezelőket csatol az elemekhez. Ebben a példában lehetővé teszi a lapozást azáltal, hogy lehetővé teszi a felhasználó számára, hogy különböző oldalszámokra kattintson, és betöltse a megfelelő adatokat.

Lapozás és rendezés AJAX segítségével a JavaScript/jQuery programban

A fent megadott szkriptek célja a nagy adatkészletek hatékony megjelenítésének problémája a felhasználással és dinamikus adatlekérés . Az alapkoncepció az alkalmazottak listájának JSON-fájlból való lekérése és az adatok felosztása kezelhető szakaszokra, lehetővé téve a felhasználók számára, hogy anélkül navigálhassanak rajtuk, hogy túlterhelnék az oldalt. Az AJAX az adatok aszinkron lekérésére szolgál, így elkerülhető, hogy a különböző adatoldalak közötti váltáskor a teljes oldalt újra be kell tölteni. Ez kulcsfontosságú a teljesítmény és a felhasználói élmény fenntartásához.

Az adatok lekérése után elengedhetetlen, hogy az aktuális oldal alapján csak egy adott részhalmazt jelenítsen meg. Ezt a függvény, amely kivonja az adattömb egy részét, hogy megjelenítse az adott oldal megfelelő alkalmazottait. Például, ha 50 alkalmazott van, és a felhasználó úgy dönt, hogy oldalanként 8 elemet szeretne megtekinteni, a szkript csak az 1. oldalon 1-8 alkalmazottat, a 2. oldalon a 9-16. számot és így tovább. Ez a megközelítés lehetővé teszi a felhasználó számára, hogy kisebb darabokban mozogjon az adatok között, javítva az oldal betöltési idejét és a navigációt.

A magukat dinamikusan generálják JavaScript segítségével. A teljes oldalszám kiszámítása a teljes adathossz és az oldalankénti tételek alapján történik. Ezt a funkció, amely biztosítja, hogy a megmaradt alkalmazottak szükség esetén további oldalra kerüljenek. Ezután minden oldalgomb megjelenik, így a felhasználók kiválaszthatják, melyik oldalt kívánják megtekinteni. Az eseményfigyelők ezekhez a gombokhoz vannak csatolva, így rákattintásra az alkalmazottak megfelelő részhalmaza megjelenik a képernyőn.

A lapozás mellett a szkriptek lehetővé teszik és adatokból. A felhasználók az alkalmazottakat utónév, vezetéknév vagy osztály szerint rendezhetik. Amikor a felhasználó kiválaszt egy lehetőséget a legördülő menüből, az adatok átrendeződnek a kiválasztott attribútum alapján, és az oldal frissül, hogy tükrözze ezeket a változásokat. Hasonlóképpen, az ábécé szűrője lehetővé teszi a felhasználók számára, hogy egy betűre kattintsanak, hogy megtekintsék azokat az alkalmazottakat, akiknek a neve ezzel a betűvel kezdődik. A rendezés, szűrés és lapozás ezen kombinációja rendkívül dinamikus és felhasználóbarát felületet hoz létre a nagy adatkészletek kezeléséhez.

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

A lapozás javítása az ügyféloldali gyorsítótárazással

Míg a bemutatott példa a szerveroldali letöltésre összpontosít A valós idejű frissítéseknél egy másik kulcsfontosságú szempont a teljesítmény fokozása az ügyféloldali gyorsítótár használatával. Ez a módszer magában foglalja az adatok egy részének elmentését az ügyféloldalon, hogy csökkentse az ismétlődő szerverkérések szükségességét. A gyorsítótárazás révén az adatok AJAX-on keresztül történő lekérése után a helyi memóriában vagy a böngésző tárhelyén tárolhatók, ami gyorsabb későbbi hozzáférést tesz lehetővé, amikor a felhasználók oldalak vagy szűrők között navigálnak. Ez csökkenti a szerverterhelést, és jelentősen javítja a lapozási rendszer válaszkészségét.

A gyorsítótárazás megvalósítása különösen hasznos lehet, ha az adatkészlet nagy és ritkán változik. Például egyszer lekérheti az összes adatot, helyileg tárolhatja JavaScript-változók segítségével, ill , majd lapozzon a gyorsítótárazott adatokból. Ez a stratégia gördülékenyebb élményt biztosít, mivel az oldalváltás vagy a szűrők alkalmazása többé nem igényel új szerverkéréseket. Ehelyett az adatokat a helyi gyorsítótárból kérik le, feldolgozzák és szinte azonnal megjelenítik.

Ezenkívül a gyorsítótárazás más dinamikus funkciókkal is kombinálható, mint pl és válogatás. Az adatok gyorsítótárazása után a szűrők és a rendezés közvetlenül alkalmazhatók a gyorsítótárazott adatkészletre. Így a felhasználók osztály, név vagy egyéb attribútumok alapján szűrhetik az alkalmazottakat anélkül, hogy újra le kellene kérniük az adatokat a szerverről. A gyorsítótárazás alkalmazása csökkenti a sávszélesség-használatot, és rendkívül előnyös lehet olyan esetekben, amikor a hálózati késleltetés aggodalomra ad okot, zökkenőmentes böngészési élményt biztosítva.

1. Hogyan működik az ügyféloldali gyorsítótárazás a lapozással?
2. Az ügyféloldali gyorsítótárazás úgy működik, hogy az első lekérés után helyileg tárolja az adatokat vagy JavaScript-változó. Így nincs szükség további AJAX-hívásokra az adatok lapozása során.
3. Milyen előnyei vannak az ügyféloldali gyorsítótárazásnak az AJAX oldalszámozásban?
4. Az ügyféloldali gyorsítótárazás javítja a teljesítményt azáltal, hogy csökkenti a szerverterhelést és gyorsabbá teszi az oldalak navigálását. Az adatokat egyszer lekéri és helyben tárolja, ami javítja a felhasználói élményt az oldalak közötti váltáskor vagy szűrők alkalmazásakor.
5. Használhatók-e a gyorsítótárazott adatok keresésre és rendezésre?
6. Igen, az adatok gyorsítótárazása után használhatók és helyileg, további szerverkérések nélkül. Ez gyorsabb és jobban reagáló felületet eredményez a felhasználók számára.
7. Alkalmas-e a gyorsítótárazás a gyakran változó adatkészletekhez?
8. A gyorsítótárazás a leghatékonyabb olyan adatkészleteknél, amelyek ritkán változnak. A dinamikus adatkészletek esetében a gyorsítótárazás továbbra is használható, de az adatok konzisztenciájának biztosítása érdekében rendszeresen frissíteni kell, vagy bizonyos triggerek esetén.
9. Hogyan lehet törölni vagy frissíteni a gyorsítótárazott adatokat?
10. A gyorsítótárazott adatok törölhetők vagy frissíthetők úgy, hogy manuálisan eltávolítja őket innen vagy az adatkészlet frissítése új AJAX kéréssel. Például hívás törli az összes tárolt adatot.