Angular Search & Pagination

Komponenta stránkování

Pro naši komponentu stránkování musíme udělat dvě hlavní věci: vykreslit všechna možná čísla stránek, aby si uživatel mohl vybrat, a zjistit, kdy se stránka změnila, aby bylo možné načíst data z vybrané stránky.

Nejprve přidáme do naší komponenty vlastnost Input, která bude přijímat informace potřebné k vytvoření stránkování: velikost stránek a celkový počet položek.

Všimněte si, že místo přímé vstupní vlastnosti jsem použil setter pro zachycení přijaté vstupní vlastnosti. To bylo kvůli dvěma věcem: abych zaokrouhlil hodnotu pagesAmount (v případě, že z nějakého důvodu již nebyla) a také abych naplnil pole čísel hodnotou pagesAmount.

Ok, tak proč potřebujeme pole čísel? Aby se uživateli vykreslily všechny možné stránky. V Angularu nemůžeme přímo vzít číslo a požádat o smyčku *ngFor určitý početkrát, takže to je jedna ze strategií, kterou obvykle používám k překonání tohoto problému.

Jak to uděláme: pomocí pole čísel ho můžeme procházet a pomocí indexu načíst požadované číslo. Protože to, co chceme, je jen obyčejný uspořádaný seznam čísel, je to jednoduché, jak ukazuje značka níže.

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

V této značce vykreslujeme všechny možné stránky, které si uživatel může vybrat. Přidali jsme ngClass pro nastavení nějakého stylu na aktuálně vybrané stránce, aby uživatel věděl, na které stránce se právě nachází. Také jsme vložili akci kliknutí, která bude emitovat událost informující nadřazenou komponentu o tom, že se vybraná stránka změnila.

Nyní také přidáme dvě šipky, abychom uživateli usnadnili život; jedna slouží k návratu o jednu stránku zpět a druhá k posunu o jednu stránku vpřed. Levou šipku však skryjeme, když se právě nacházíme na první stránce, a pravou šipku skryjeme, když se právě nacházíme na poslední stránce.

Ale stále tu máme jeden problém! Co když jsou naše itemsAmount stovky a naše pageSize je malá? Nebo dokonce tisíce položek? Vykreslovali bychom všechny stránky najednou a měli bychom dost špatnou použitelnost, když by tam všechna ta čísla jen tak visela.

Existuje několik možných návrhových řešení tohoto problému, například skrytí prostředních stránek nebo skrytí posledních stránek po určitém počtu. To, které ukážu, je jednoduché na dosažení a věřím, že může být v některých případech zajímavé; a to je změna čísla z pouhého vypisování na použití elementu select html s každou stránkou jako volbou.

Zpět tedy k našemu značení, do části, kde vykreslujeme čísla stránek, přidáme následující změny:

Finální kód

Složením všech našich částí dohromady by tedy vznikl finální kód pro implementaci jednoduché, ale efektivní komponenty stránkování. Obdrží vstup s velikostí stránek a celkovým množstvím položek a umožní uživateli vybrat, kterou stránku chce zobrazit, přičemž spustí událost označující vybranou stránku, aby bylo možné zpracovat požadovanou logiku/požadavky na stránkování.