Paginacja / Pagination

740 0

Paginację spotykamy często w sklepach internetowych, portalach aukcyjnych, blogach z dużą ilością treści czy nawet w wynikach wyszukiwania najpopularniejszej wyszukiwarki. Gdy mamy do pokazania bardzo wiele wyników to nie chcemy zmuszać użytkownika do przewijania w nieskończoność i najlepszym wyjściem jest rozbicie rezultatów na kilka-kilkanaście podstron pomiędzy którymi będzie się przełączać. Nie można też zapomnieć o kwestii wydajnościowej, wczytanie ogromnej ilości treści spowoduje wydłużenie czasu ładowania strony ( to co prawda można obejść poprzez tzw „lazy load” ale ten tutorial nie jest o tym ). Przejdźmy zatem do zapoznania się z Bootstrapową paginacją.

Podstawowy przykład

Zacznijmy od tego, że paginacja jest elementem służącym do nawigacji, więc powinniśmy ją umieścić wewnątrz elementu <nav>. Kolejnym elementem jest utworzenie standardowej listy <ul> z klasą .pagination, jej elementów w ilości zależnej od ilości wyników <li> z klasą .page-item, oraz linków do poszczególnych stron z klasą .page-link

Kod

Nawigacja w paginacji

W powyższym przykładzie skorzystaliśmy z wyrazów „Poprzedni” oraz „Następny” ale możemy zmienić ten elementy na dowolny symbol, czy to encję HTML czy ikonę Font Awesome. Wystarczy wstawić swój tekst w pierwszy i ostatni element listy. Ja posłużę się encjami & laquo ; oraz & raquo ;, które wyświetlą nam podwójne strzałki.

Przykład

Kod

Status paginacji

Dowiedzieliśmy się już jak stworzyć element paginacji. Ale wymaga on delikatnej rozbudowy. Jeśli jesteśmy na pierwszej stronie wyników to nie potrzebujemy aktywnego linka do wcześniejszych wyników. Gdy natomiast jesteśmy już dalej to dobrze było by wizualnie odznaczyć, która to strona. Uzyskamy to z pomocą dwóch klas .disabled oraz .active dodanymi do elementy listy czyli do klasy .page-item

Kod

Rozmiar paginacji

Klasy odpowiedzialne za zmianę wielkości elementów są Wam już pewnie znane. Niektóre elementy po dodaniu klasy .*-lg lub .*-sm zmieniają swoje rozmiary na większy lub mniejszy od standardowego. To samo ma miejsce w przypadku paginacji i klas .pagination-lg oraz .pagination-sm, które dodajemy do klasy .pagination.

Kod

Kod

Położenie paginacji

Domyślnie paginacja układa się od lewej. Korzystając z klas flexboxa, które oferuje nam Bootstrap, możemy w łatwy sposób ją wycentrować lub przesunąć do prawej. W celu wycentrowania do elementu z klasą .pagination dodajemy klasę .justify-content-center. Przesunięcie w prawo uzyskamy dodając temu elementowi klasę .justify-content-end

Kod

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (4 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*