# Szűrők és lapozás a dinamikus táblához

> A JetEngine dinamikus tábla szűrése Elementorban: keresés, kiválasztás, tartomány, aktív címkék, szűrők eltávolítása, és a Lapozás widget a lekérdezés korlátjával.

A JetEngine **Tables Builder** (dinamikus táblák) modulja táblát készít, amelyet az oldalon a **Dynamic Table** widget jelenít meg. A JetSmartFilters szűrői és a **Lapozás** widget ezt a táblát is kezelik. A szolgáltató, amelyre a szűrőket kötöd, a **JetEngine Dynamic Table**. Blokkszerkesztőben a lapozás beállítását a [Lapozás dinamikus táblához](https://hub.hellowp.io/hu/plugins/jet-smart-filters/gutenberg-lapozas-tabla/) fejezet írja le.

## Követelmények

- Elementor (az ingyenes is elég).
- Aktív JetEngine, a dinamikus táblák modullal, és aktív JetSmartFilters.
- Egy kész tábla a **JetEngine → Tables Builder** oldalon.

## Keresés szűrő

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt.
2. Add meg a nevet és a címkéket, és a **Szűrő típusa** listában válaszd a **Keresés** lehetőséget.
3. Szükség esetén módosítsd a **Placeholder** szövegét, és válaszd ki a **Search by** forrást: **Default WordPress search** (az alapértelmezett WordPress-keresés) vagy **By Custom Field** (egyéni mező szerint, a lekérdezési beállításoknak megfelelően).
4. Kattints a **Publish** gombra.
5. Az oldalszerkesztőben add hozzá a **Search Filter** widgetet, és válaszd ki a létrehozott szűrőt.
6. A **This filter for** mezőben válaszd a **JetEngine Dynamic Table** szolgáltatót.

A widgeten további beállítások:

- **Apply type**: **AJAX**, **AJAX on typing**, **Page reload** vagy **Mixed**,
- a keresőgomb szövege és ikonja,
- a szűrőcímke megjelenítése vagy elrejtése,
- **Query ID**,
- **Additional Providers**, ha több szolgáltatóra szeretnéd alkalmazni.

A **Stílus** és a **Haladó** fülön a megjelenést állíthatod. A keresés szűrő részletes beállításairól a [Szűrőtípusok](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok/) fejezet szól.

## Kiválasztás szűrő

1. Hozz létre új szűrőt: **Intelligens szűrők → Új hozzáadása**, szűrőtípus **Kiválasztás**.
2. Ha az **Is hierarchical** (hierarchikus) kapcsoló be van kapcsolva, új hierarchiaszintet vehetsz fel. Kikapcsolt állapotban további beállítások jelennek meg.
3. Az **Data Source** lehet például a **Taxonómiák**. A példában a „Termék színe” taxonómiát használjuk, a színek a termékek attribútumaiból jönnek, amelyeket a termék szerkesztésekor veszel fel.
4. További beállítások: **Show empty terms**, **Show only childs of current term**, a **Placeholder**, az **Is Checkbox Meta Field** kapcsoló, valamint elemek kizárása vagy belevétele.
5. Kattints a **Publish** gombra.
6. Az oldalszerkesztőben add hozzá a **Select Filter** widgetet, válaszd ki a szűrőt, és a **This filter for** mezőben a **JetEngine Dynamic Table** szolgáltatót.

A widget tartalmi beállításai a keresés szűrőéhez hasonlók. Az **Apply type** értéke itt **AJAX**, **Page reload** vagy **Mixed**. Az **Apply on** mező két lehetőséget kínál: **Value change** (érték módosításakor) és **Click on apply button** (az Alkalmaz gomb megnyomásakor). Két kapcsolóval megjelenítheted vagy elrejtheted az **Apply Button** gombot és a **Filter Label** feliratot. Itt is beállítható a **Query ID** és az **Additional Providers**.

A termékattribútumok használatáról lásd a [WooCommerce-termékek szűrése attribútumok szerint](https://hub.hellowp.io/hu/plugins/jet-smart-filters/adatforras-woo-attributumok/) fejezetet.

## Tartomány szűrő

1. Hozz létre új szűrőt, és a **Szűrő típusa** listában válaszd a **Tartomány** lehetőséget. A többi beállítással a célnak megfelelő szűrőt alakíthatsz ki ([Szűrőtípusok](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok/)).
2. Az oldalszerkesztőben add hozzá a **Range Filter** widgetet, válaszd ki a szűrőt, és a **This filter for** mezőben a **JetEngine Dynamic Table** szolgáltatót.
3. A tartalmi beállítások a **Kiválasztás** szűrőével azonosak, a **Stílus** fülön a megjelenést alakíthatod.

## Aktív címkék

Az **Active Tags** widget megjeleníti a kiválasztott szűrőket, és lehetővé teszi, hogy a látogató egyet is eltávolítson a többi törlése nélkül.

1. Add hozzá az **Active Tags** widgetet a táblát tartalmazó oldalhoz. Az oldalon legalább egy szűrőnek már lennie kell, hogy az Active Tags helyesen jelenjen meg.
2. Válaszd ki a táblát szolgáltatóként, és az alkalmazási mód legyen **AJAX** vagy **Page reload**.
3. Ha bekapcsolod a **Clear Item** beállítást, add meg a fő címkét és a **Clear Item Label** feliratot.
4. Itt is beállítható az egyedi **Query ID** és az **Additional Providers**.
5. A **Stílus** és **Haladó** beállítások után nézd meg a nyilvános oldalt.

Például egy ár szerinti tartomány szűrő mellett a látogató az Active Tags widgetben kiválaszthatja, melyik szűrési adatot távolítja el.

## Szűrők eltávolítása

A **Remove Filters** widget egy gombot ad, amely az összes alkalmazott szűrőt törli. A **This filter for** listában a **JetEngine Dynamic Table** lehetőséget válaszd. A többi beállítás szabadon alakítható. A widget részletei az [Aktív szűrők és a Szűrők eltávolítása](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok-aktiv-szurok-eltavolitas/) fejezetben vannak.

## Lapozás a táblához

Ha a táblának sok sora van, két lépésben állíthatod be a lapozást: előbb a lekérdezés korlátját, aztán a **Lapozás** widgetet.

### A lekérdezés korlátja

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és hozz létre új lekérdezést (**Új hozzáadása**), vagy szerkessz egy meglévőt. A példában a neve „Termékek táblához”, a típusa **WC terméklekérdezés**, amely a termékek adatait adja.
2. Állíts be egy **Egyéni lekérdezés-ID** értéket, amely összeköti a lekérdezést, a szűrőt és a táblát. Mindhárom helyen azonosnak kell lennie. A példában ez „tablazat-lapozas”. Az azonosító ne tartalmazzon számot az elején.

   ![Az Egyéni lekérdezés-ID mező a Query Builderben](./kepek/widgetek-query-builder-altalanos.webp)

   *Az Egyéni lekérdezés-ID mező a Query Builderben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

   A képen az **Egyéni lekérdezés-ID** mező látszik.

3. Nyisd meg a lekérdezés **Lapozás** beállításait. Győződj meg róla, hogy a **Lapozás engedélyezése** be van kapcsolva, ez kell ahhoz, hogy a lekérdezés és a lapozás együtt működjön.
4. A **Korlát** mezőben add meg, hány elem jelenjen meg, például 4-et.
5. Mentsd a lekérdezést.

![A Lapozás fül a Query Builderben](./kepek/widgetek-query-builder-lapozas.webp)

*A Lapozás fül a Query Builderben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

A képen a **Bejegyzések lekérdezése** típus **Lapozás** füle látszik. A **WC terméklekérdezés** típusnál a lapozási mezők (**Lapozás engedélyezése**, **Korlát**) neve ettől eltér, a menete azonos: lásd a [Lapozás dinamikus táblához](https://hub.hellowp.io/hu/plugins/jet-smart-filters/gutenberg-lapozas-tabla/) fejezetet.

Tedd a **Dynamic Table** widgetet az oldalra, és válaszd ki a táblát a **Table** mezőben. Ennyi sor jelenik meg, amennyit a lekérdezés korlátja megenged. Ha kevesebb sort szeretnél (például 2-t), nyisd meg újra a lekérdezést, módosítsd a **Korlát** értékét, és mentsd.

### A Lapozás widget

1. A widgetkeresőbe írd be: „Pagination”. Ez a JetSmartFilters **Lapozás** widgetje. Húzd a **Dynamic Table** alá.
2. A **Tartalom** fülön a **Pagination** mezőben válaszd a **JetEngine Dynamic Table** szolgáltatót. Az **Apply type** értéke **AJAX**, **Page reload** vagy **Mixed** lehet.
3. A **Query ID** mezőbe írd a lekérdezésnél megadott értéket (a példában „tablazat-lapozas”).
4. A **Controls** fülön megjelenítheted vagy elrejtheted az **előző / következő** gombokat, és megadhatod a **Prev Text** és **Next Text** feliratot. Az eltolások (offset) értékeivel is állíthatod, hány oldalszám látszik.
5. A **Stílus** fülön szabhatod testre a megjelenést.
6. A **Haladó** részen, az **Elrendezés** (Layout) beállításainál add meg a **CSS ID** mezőben ugyanazt az azonosítót, amely a lekérdezést, a lapozót és a táblát összeköti. A példában: „tablazat-lapozas”.
7. Mentsd az oldalt.

A nyilvános oldalon a tábla alatt megjelenik a lapozó. Egy oldalszámra kattintva a tábla a megfelelő sorokat mutatja. A lapozó beállításait az [Lapozás](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-lapozas/) fejezet írja le.