2026.08.24.
Weboldal fejlesztés és SEO

REST API lapozás és szűrés megbízható backend megoldás.

Temesvári László

REST API: Hogyan tervezzünk következetes lapozást, szűrést és rendezést?

Ha valaha is böngésztél egy webáruház termékkínálatán, vagy végigpörgettél egy híroldalt, bizonyára találkoztál már a lapozással (pagination), a szűréssel és a rendezéssel. Ezek olyan alapvető funkciók, amelyek nélkül egy modern weboldal vagy alkalmazás már alig használható. De mi történik a háttérben? Hogyan biztosítja a backend ezeket a funkciókat egy REST API-n keresztül következetesen és hatékonyan? Ebben a cikkben egy fejlesztői szemüvegen keresztül betekintést nyerünk abba, hogy egy jól tervezett API-megoldás hogyan javíthatja a felhasználói élményt, és miért fontos ez akár egy kisvállalkozói honlap, egy céges WordPress weboldal vagy egy komplex webfejlesztési projekt sikerességének szempontjából.

Miért fontos a következetes API kialakítás?

Képzeld el, hogy ügyfeleid vagy látogatóid egy terméklistát nézegetnek. Rákszűrnek a „zöld” színre, majd a 2. oldalra navigálnak. Ha ezután „ár szerint növekvőbe” rendezik az eredményeket, és a lista visszadobja őket az 1. oldalra, vagy rosszabb esetben összekeverednek a szűrt és a nem szűrt elemek, az élmény katasztrofális. A felhasználó elveszti a helyét, a bizalmát, és nagy valószínűséggel elhagyja az oldalt. Egy következetesen működő REST API a backendben pontosan ezeket a helyzeteket hivatott megakadályozni, biztosítva, hogy a lapozás, a szűrés és a rendezés harmonikusan együtt dolgozzon.

A döntéshozók számára ez annyit jelent: magasabb felhasználói elégedettség, hosszabb idő, amit a látogató az oldalon tölt, és végső soron több konverzió (bevétel, kapcsolatfelvétel, stb.). A weboldal készítés vagy honlapkészítés során tehát nem csak a kinézetre, hanem az ilyen alapvető, láthatatlan logikára is óriási figyelmet kell fordítani.

Az alapok: Paraméterek a URL-ben

A titok a kiszámíthatóságban rejlik. Egy jól tervezett API végpont, pl. a /api/products a lekérdezéseit a query paraméterek (URL-ben lévő beállítások) segítségével kezeli. Ezeket a paramétereket mind a frontend (pl. JavaScript, jQuery), mind a backend (pl. PHP) ismeri és követi.

// Példa egy tipikus API hívásra szűréssel, rendezéssel és lapozással:
// GET /api/products?color=green&sort=price_asc&page=2&limit=20

A fenti példában: * color=green → Szűrés a zöld termékekre. * sort=price_asc → Rendezés ár szerint növekvő sorrendbe. * page=2 & limit=20 → Lapozás a második oldalra, ahol oldalanként 20 termék jelenik meg.

Backend implementáció PHP-ban

A backend (szerveroldal) feladata, hogy ezeket a paramétereket fogadja, feldolgozza, és a megfelelő adatokat adja vissza az adatbázisból. Lássunk egy egyszerűsített PHP példát, ami egy ilyen kérést kezel.

= :price_min";
    $params[':price_min'] = $filters['price_min'];
}

// Rendezés
$query .= " ORDER BY {$sortField} {$sortDirection}";

// Lapozás
$query .= " LIMIT :limit OFFSET :offset";
$params[':limit'] = $limit;
$params[':offset'] = $offset;

// ... a lekérdezés végrehajtása, eredmény JSON formátumban történő visszaküldése
$totalCount = /* SQL COUNT query a szűrési feltételek alapján */;

$response = [
    'data' => $fetchedProducts,
    'pagination' => [
        'current_page' => $page,
        'per_page' => $limit,
        'total' => $totalCount,
        'total_pages' => ceil($totalCount / $limit)
    ],
    'filters' => $filters,
    'sort' => ['field' => $sortField, 'direction' => $sortDirection]
];

header('Content-Type: application/json');
echo json_encode($response);
?>

A backend kulcsfontosságú lépése a total és total_pages visszaadása is. E nélkül a frontend nem tudja megjeleníteni, hogy hány oldal van összesen.

Frontend integráció (jQuery, Bootstrap, SCSS)

A frontend feladata, hogy ezt az API-t meghívja, és a kapott adatokat felhasználóbarát komponensekké (gombok, listák, lapozósáv) formálja. Itt a jQuery és a Bootstrap klasszikus és hatékony kombinációja segíthet gyors prototípusok vagy közepes komplexitású webfejlesztési feladatok elkészítéséhez.

// jQuery példa az API hívásra és a táblázat frissítésére
function loadProducts(page = 1) {
    // Paraméterek összeállítása az űrlapmezők alapján
    let params = {
        page: page,
        limit: $('#per-page-select').val(),
        color: $('#filter-color').val(),
        sort: $('#sort-by').val()
    };

    $.getJSON('/api/products', params, function(response) {
        // 1. A terméklista frissítése
        let $tableBody = $('#product-table tbody');
        $tableBody.empty();
        $.each(response.data, function(index, product) {
            $tableBody.append(`
                <tr>
                    <td>${product.name}</td>
                    <td>${product.color}</td>
                    <td>${product.price} Ft</td>
                </tr>
            `);
        });

        // 2. A lapozósáv (pagination) frissítése Bootstrap komponenssel
        let $pagination = $('#pagination');
        $pagination.empty();
        let totalPages = response.pagination.total_pages;
        let currentPage = response.pagination.current_page;

        // Előző oldal gomb
        $pagination.append(`<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#">«</a>
        </li>`);

        // Oldalszámok
        for (let i = 1; i <= totalPages; i++) {
            $pagination.append(`<li class="page-item ${i === currentPage ? 'active' : ''}">
                <a class="page-link" href="#">${i}</a>
            </li>`);
        }

        // Következő oldal gomb
        $pagination.append(`<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#">»</a>
        </li>`);
    });
}

// Eseménykezelők a szűrők és a rendezés változásához
$(document).ready(function() {
    $('#filter-color, #sort-by, #per-page-select').on('change', function() {
        loadProducts(1); // Mindig az 1. oldalra ugrunk új szűrés/rendezés esetén
    });
    loadProducts(); // Oldal betöltésekor
});

A megjelenés finomhangolásához az SCSS ad extra rugalmasságot a hagyományos CSS-hez képest.

// SCSS példa a lapozó és a táblázat stílusozásához
#product-table {
    margin-top: 2rem;
    tbody tr {
        transition: background-color 0.2s ease;
        &:hover {
            background-color: #f8f9fa;
        }
    }
}

#pagination-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;

    .page-item {
        &.active .page-link {
            background-color: #007bff; // Bootstrap primary color
            border-color: #007bff;
        }
        .page-link {
            color: #333;
            user-select: none; // Kényelmesebb érzés kattintáskor
        }
    }
}

.filter-box {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    .form-group {
        margin-bottom: 1rem;
    }
}

Gyakori buktatók és tanácsok

1. Elfelejteni a szűrést a teljes szám (total) lekérdezésében: Ha a lapozósáv oldalszámait a teljes termékdarabszámból számolod, de a COUNT lekérdezésed nem ugyanazokat a szűrőket alkalmazza, a lapozósszámok teljesen el fognak csúszni. 2. Rendezés és lapozás összeegyeztethetetlensége: Ha az adatforrásod (pl. adatbázis) nem garantálja, hogy két egymást követő lekérdezés ugyanolyan sorrendben adja vissza az adatokat (pl. új bejegyzések miatt), a lapok között duplikánsok vagy hiányzó elemek jelenhetnek meg. Használj stabil rendezést (pl. id alapján másodlagos rendezésként). 3. Túl sok adat egy lapon (limit): Ne engedd meg a felhasználónak, hogy akár 1000 elemet is lekérhessen egy lapon. Állíts be egy ésszerű maximumot a backendben, hogy megvédd a szervered a túlterheléstől. 4. Frontend állapot kezelése: A példánkban a frontend „elveszíti” a jelenlegi lapozási állapotot, ha a felhasználó frissíti az oldalt. Ennek orvoslására használhatod az URL hash-ét vagy a History API-t, hogy minden szűrő, rendezés és oldalszám bekerüljön a címsorba, és a felhasználó megoszthatja a linket vagy frissíthet.

Összegzés

A REST API-ban való következetes lapozás, szűrés és rendezés kialakítása nem csak egy fejlesztői „szükségszerűség”. Ez az a láthatatlan alap, amely meghatározza, hogy a WordPress weboldalad terméklistája, a céges honlapod hírfolyama vagy bármilyen más webfejlesztési megoldásod mennyire lesz gördülékeny és használható. A backend (pl. PHP) biztosítja a szilárd, biztonságos logikát, míg a frontend (pl. jQuery, Bootstrap, SCSS) ezt átformálja egy olyan felhasználói élménnyé, ami nem csak működik, hanem értéket is teremt az üzlet számára. Egy ilyen alapos megközelítés hosszú távon megtérül a hűségesebb felhasználókból és a sikeresebb online megjelenésből.

A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.

Kapcsolódó cikkek