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
Przykład
Kod
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
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
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">«</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
</nav>
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
Przykład
Kod
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
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.
Przykład
Kod
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
Przykład
Kod
<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
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
Przykład
Kod
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
Przykład
Kod
<nav>
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#">Poprzedni</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Następny</a></li>
</ul>
</nav>
(6 głosów, średnia: 4,17 na 5)
Loading...