# Sorszámozás a listában és a táblában (Listing Counter)

> A Listing Counter kiegészítő telepítése, és sorszámok megjelenítése Listing Gridben és dinamikus táblában, Elementorban és blokkszerkesztőben.

A JetEngine DevTools **Listing Counter** kiegészítője egy külön visszahívást (callback) ad a JetEngine-hez, amellyel a listák és a dinamikus táblák elemei sorszámot kaphatnak. Bejegyzésekkel és egyéni bejegyzéstípusokkal működik, a **Dynamic Field** és a **Listing Grid** elemmel, valamint a dinamikus táblával, egyéni lekérdezés használatával.

## A kiegészítő telepítése

1. Töltsd le a kiegészítőt a GitHubról (a **jet-engine-list-counter-callback** adattárból): kattints a **Code** gombra, majd a **Download ZIP** pontra.
2. A **Bővítmények → Új hozzáadása** oldalon tölts fel a ZIP-fájlt, majd telepítsd és aktiváld.

## A lekérdezés létrehozása

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.
2. A **Név** legyen például „Query for listing counter”, a **Lekérdezés típusa** a **Posts Query**, és válaszd ki a bejegyzéstípust, amelyet listázol (vagy táblába teszel).
3. Szükség szerint add meg a többi lekérdezési beállítást, és mentsd.

## Sorszám a listában

### Dynamic Field a sorszámhoz

1. Nyisd meg a listázási sablont, és húzd be a **Dynamic Field** elemet oda, ahol a számnak látszania kell.
2. Kapcsold be a **Filter field output** kapcsolót. Ekkor megjelenik a **Callback** és a **Select query** lista.
3. A **Callback** legyen **Listing's counter**, a **Select query** pedig a létrehozott lekérdezés.
4. A szám stílusát a stílusbeállításokban formázhatod.

Blokkszerkesztőben ugyanez a **Dynamic Field** blokk beállításaiban érhető el.

### A Listing Grid beállítása

1. Nyisd meg az oldalt, amelyen a **Listing Grid** van. Blokkszerkesztőben add meg a megjelenítendő bejegyzéstípust is.
2. A **Custom Query** szakaszban kapcsold be a **Use Custom Query** kapcsolót, és a **Select query** listából válaszd ki ugyanazt a lekérdezést, amelyet a számlálónál is megadtál.

A frontenden minden elem megkapja a saját sorszámát.

## Sorszám a dinamikus táblában

1. A **JetEngine → Tables Builder** oldalon kattints az **Add New Table** gombra.
2. A **General Settings** fülön add meg a táblázat nevét, a **Data Query** listában pedig válaszd ki a számlálóhoz készített lekérdezést.
3. A **Columns** fülön vegyél fel egy új oszlopot a számnak (a példában „index”). Kapcsold be a **Filter Column Output** kapcsolót, a **Filter Callback** legyen **Listings counter**, a **Select query** pedig a létrehozott lekérdezés.
4. A többi oszlopot is felveheted: egy mezőhöz válaszd a **Data Source** listában a **Meta Field** értéket és a mezőt a **Select Field** listából. Ha az egész bejegyzést szeretnéd megjeleníteni, a **Column Content** értéke legyen **Template**, és a **Column template** listából válaszd ki a sablont.
5. A **Table Style** fülön stílust adhatsz a táblának. A **Create Table** gombbal mentsd.
6. Az oldalon add hozzá a **Dynamic Table** elemet (blokkszerkesztőben a **Select Table** listából), és válaszd ki az elkészült táblát.

A frontenden a tábla minden sora a saját sorszámával jelenik meg. A dinamikus táblákról részletesen a [Dinamikus táblák](https://hub.hellowp.io/hu/plugins/jet-engine/modulok/) modulnál olvashatsz.
