Paginacja, a jeśli poptrosta - paginacja, jest ważnym elementem każdej mniej lub bardziej wypełnionej strony. Różne systemy zarządzanie witryną w większości ma wbudowane narzędzia do wdrażania paginacji. Istnieje również wiele osobnych wtyczek napisanych dla tej przydatnej rzeczy, w większości przypadków są one budowane przy użyciu . Wszystkie te wtyczki, różniące się zarówno stylem wykonania, jak i sposobem wykonania funkcjonalność, ale co najważniejsze, wszystkie z nich są świetną alternatywą dla implementacji stronicowania masowych treści witryn po stronie serwera.

Proponuję do rozpatrzenia, moim zdaniem, jeden z najłatwiejszych Wtyczki jQuery, aby stworzyć paginację, która pomoże Ci uporządkować, atrakcyjną i szybką paginację.

Bardzo lekki, pod każdym względem i wagą, i wszystko, co wiąże się z połączeniem, ustawieniami, rozbrykany do tworzenia paginacji, wyposażony w trzy style projektowania i pełen wsparcia.

Przy okazji, jeśli nie jesteś zadowolony ze standardowych fasonów, możesz użyć , które nie będą trudne do wkręcenia .css podłącz.

Teraz przyjrzyjmy się, jak poprawnie podłączyć samą wtyczkę i plik stylu do dokumentu, czyli bezpośrednio osadzić go na stronach witryny i przejść przez dostępne ustawienia wtyczki.

Na początek oczywiście trzeba mieć wtyczkę, czyli z kodem źródłowym, w którym jquery javascript i plik stylu css.

Przyjrzyjmy się krok po kroku, jak korzystać z wtyczki:

Krok 1 w tym jQuery

W treści strony w sekcji ... musisz podłączyć framework jQuery, najlepiej w wersji 1.7.2 lub nowszej, możesz to zrobić za pomocą specjalnego repozytorium Google:

Jeśli masz już włączoną obsługę jQuery na swojej stronie i działa ona z mocą i main, możesz spokojnie pominąć wszystkie opisane powyżej gesty, najważniejsze jest upewnienie się, że wersja jQuery nie jest zbyt gęsta. Nawiasem mówiąc, w WordPressie jest to w porządku.
Następnie podłączamy naszego konia roboczego - wtyczkę jquery.simplePaginacja.js:

Nie możesz ogrodzić ogrodu, ale po prostu wybierz styl, którego potrzebujesz, jasny, ciemny lub kompaktowy i wstaw zestaw reguł do pliku .css swojego szablonu. Napisz własne style lub użyj Bootstrap, również opcja, pod względem oryginalności i rozwoju umiejętności budowania witryn, jeszcze bardziej preferowana.

Krok 3 HTML

Aby wyświetlić pasek stronicowania na stronach witryny, na których planujesz go umieścić, jest to bardziej logiczne i najczęściej jest to na dole głównej treści, powinieneś napisać:
Dla jasnego tła:

Kompaktowy motyw:

$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

W tym przykładzie użyłem inicjalizacji #light-pagination dla jasnej paginacji motywu, ale możesz zmienić selektor na inny, dla compact jest to #compact-pagination , lub dla ciemnego stylu #dark-pagination . W takim przypadku nie zapomnij zmienić klasy w funkcji styl css.
Jak już pisałem powyżej, wtyczka jest bardzo elastyczna w ustawieniach, dostępne są następujące opcje do zmiany:

• przedmiotów- Całkowita liczba elementów, które zostaną użyte do obliczenia stron. Domyślna: 1 .
• przedmioty na stronie- Liczba pozycji wyświetlanych na każdej stronie. Domyślna: 1 .
• strony- Opcjonalny. Jeśli określono wartość, elementy i opcje itemsOnPage są ignorowane. Ustawia liczbę stron na liście.
• wyświetlane strony- Ile numerów stron powinno być widocznych podczas nawigacji. Minimum dopuszczalna wartość: 3 , domyślna: 5 .
• krawędzie— Ile numerów stron jest widocznych na początku i na końcu numeracji. Domyślna wartość: 2 .
• bieżąca strona- Która strona zostanie wybrana natychmiast po uruchomieniu. Logicznie, wartość domyślna to: 1 .
• hrefPrefiks tekstu- Ciąg znaków używany w atrybucie HREF jest dodawany przed numerem strony. Domyślna: "#strona".
• hrefTextSuffix- Ciąg znaków używany w atrybucie HREF jest wstawiany po numerze strony. Wartość domyślna to pusty ciąg.
• poprzedni tekst— Tekst przycisku do poprzedniej strony. Domyślna: "poprzedni".
• następnyTekst— Tekst przycisku dla następnej strony. Domyślna: Następny
• styl css- Określać styl css. Domyślna: "lekki motyw"
• wybierzKliknij- Wybór strony po kliknięciu, domyślnie - włączony ( PRAWDA), nie rozumiałem, dlaczego to wyłączyć, ale jest taka możliwość, wartość to „fałsz”.

Omówiliśmy najbardziej podstawowe ustawienia. O dodatkowe funkcje oraz dostępne metody Możesz dowiedzieć się, jak korzystać z tej wtyczki, czytając dokumentację bezpośrednio na stronie programisty.

Pozostaje mi tylko życzyć powodzenia i sukcesów w pracy nad nowymi projektami.

Paginacja, w tym nawigacja po stronie, to dość prosta sprawa, ale początkujący często mają problemy z jej stworzeniem, a co najważniejsze ze zrozumieniem, jak to działa...

Jednym z zadań paginacji jest jednoczesne wyświetlanie nie wszystkich elementów, ale ich ograniczona liczba, powiedzmy, nie więcej niż $pp elementów, oraz to, jaka grupa elementów jest wyświetlana, zależy od parametr wejściowy$pn to numery tej grupy. Ten numer jest w rzeczywistości numerem strony. Oto taka prośba:

SELECT * FROM `table` LIMIT (($pn-1)*$pp),($pp)

Wartość $pn jest zmniejszana o 1, aby np. dla pierwszej strony listy z wartością $pp równą 10 wybierane były elementy od 0 do 9, a nie od 10 do 19. Oczywiście, jeśli strony są numerowane od zera, dekrementacja wartości $ pn nie jest potrzebna w żądaniu.

Aby rozwiązać kolejny problem, czyli budowanie nawigacji po stronach, musisz przede wszystkim znać całkowitą liczbę stron na liście. Aby to zrobić, możesz najpierw zapytać o całkowitą liczbę elementów. Lub bezpośrednio w zapytaniu oblicz łączną liczbę stron na podstawie łącznej liczby elementów:

SELECT FLOOR((LICZBA(*)+($pp-1))/($pp)) FROM `tabela`

Aby uzyskać całkowitą liczbę stron $pc, użyto tutaj dobrze znanej formuły $pc=(count+per_page-1) div per_page, ale skorygowanej o użycie funkcji FLOOR zamiast dzielenia liczb całkowitych (div). Możesz również użyć operatora DIV, który od dawna jest obsługiwany w MySQL.

Jeśli potrzebujesz wyświetlić tylko jeden element na stronie, powyższe zapytania można uprościć.

Po otrzymaniu całkowitej liczby stron $pc możesz natychmiast wyświetlić linki do wszystkich stron listy zapętlając z licznikiem w zakresie od 1 do $pc tylko do stron z numerami w ograniczonej liczbie zależnej bieżąca strona zasięg. Na przykład oto formuły na uzyskanie wartości ograniczających zakres $first i $last dla tzw. nawigacji bankowej:

$pierwszy=$pn-1-($pn-2)%$zakres; $ostatni=$pierwszy+$zakres<$pc?$first+$range:$pc;

W $range musisz wpisać wartość 1 mniejszą niż wymagana szerokość zakresu, np. aby wyświetlić nie więcej niż siedem zwykłych linków do stron, musisz w $range wpisać wartość 6. Jeśli połączysz wszystko, co napisano powyżej, będzie to wyglądać tak:

$pp=10; if ($result=mysqli_query($link,"SELECT FLOOR((COUNT(*)+".($pp-1).")/".$pp.") FROM `table`")) ( list($ pc)=mysqli_fetch_row($result); mysqli_free_result($result); // umieść rotator dla stron o numerach 0 i 1 tutaj if ($pn==0||$pn>$pc) error(404); elseif ($result =mysqli_query($link,"SELECT * FROM `table` LIMIT".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$pn-1- ($pn-2)%$zakres; $ostatni=$pierwszy+$zakres<$pc?$first+$range:$pc; } else error(503); } else error(503);

Pozostaje tylko wyświetlić pasek nawigacyjny:

W pokazanej implementacji pierwszy zwykły link (jeśli nie jest to link do pierwszej strony) pozwala na przejście do poprzedniego banku stron. Jeśli chcesz, aby ostatni zwykły link umożliwiał również przejście do następnego banku stron (to znaczy działa podobnie do linku „Więcej” i może go zastąpić), możesz zamiast tego podać wyrażenie ($zakres-1). zmiennej $zakres w pierwszej formule jako dzielnika.

Funkcja pagelink odpowiada za wygenerowanie części linku, która określa numer strony. W przypadku korzystania z rotatorów numerów stron 0 i 1 najlepiej umieścić tę funkcję obok rotatora, ponieważ powinien kompensować działanie rotatora, umożliwiając uzyskanie adresu / zamiast /?p=1 w linku, aby dopasować zerową wartość parametru wejściowego $pn:

Funkcja pagelink($p) ( return $p>1???p=".$p:""; ) if ($pn==0) $pn++; elseif ($pn==1) $pn--;

zbiór bezpłatnych Paginacja HTML i CSS przykłady kodu: responsywny, prosty, materiałowy design, kropki nawigacyjne itp. Aktualizacja kolekcji czerwiec 2018. 5 nowych przedmiotów.

Powiązane artykuły

O kodzie

Responsywna paginacja/pager w HTML i CSS. Zmień rozmiar przeglądarki, aby pokazać ciekawy efekt.

Responsywne: tak

Zależności: bootstrap.css

O kodzie

Linia podążaj za paginacją

Linia CSS podąża za paginacją.

Responsywne: tak

Zależności:-

O kodzie

Przyciski stronicowania

Przyciski stronicowania czystego CSS.

Kompatybilne przeglądarki: Chrome, Firefox, Opera, Safari

Responsywne: tak

Zależności:-

O kodzie

Paginacja wierszowa z Hover

Czysta paginacja linii CSS z efektem najechania.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności:-

O kodzie

Paginacja Pacmana

Animacja stronicowania z HTML, CSS i JS.

Kompatybilne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności:-

O kodzie

prosty css.

O kodzie

Czysty Paginacja CSS Pac-Man z animacją po najechaniu.

O kodzie

Prosta responsywna paginacja.

O kodzie

Paginacja HTML i CSS.

O kodzie

Przykład paginacji, który umożliwia nawigację między różnymi stronami. Ten przykład musiałby mieć atrybuty href, aby móc pracować z rzeczywistą aplikacją wymagającą stronicowania.

O kodzie

Paginacja z niestandardowymi właściwościami CSS.

Opcje i projekty stronicowania.
Wykonane przez MojoM
25 maja 2017 r.

Demo GIF: Hopper strony SVG

Zasobnik stron HTML, CSS i SVG.
Wykonane przez Chrisa Gannona
14 maja 2017 r.

Demo GIF: nieskończona paginacja

Nieskończona paginacja w HTML i CSS.
Wykonane przez Mariusza Dąbrowskiego
27 kwietnia 2017 r.

O kodzie

Składniki CSS: .

12 pomysłów na paginację stron internetowych za pomocą HTML i CSS.
Wykonane przez Rosa
3 listopada 2016

Demo GIF: Paginacja

Paginacja za pomocą HTML/CSS/JavaScript.
Wykonane przez JP Notharda
9 października 2016

Demo GIF: animacja najechania na strony

Animacja najechania stronicowania HTML i CSS.
Wykonane przez Elenę Nazarową
12 września 2016

Paginacja z efektem najechania.
Wykonane przez Andre Wicherta
27 sierpnia 2016

Wskaźniki paginacji z HTML, CSS i JavaScript.
Wykonane przez Mosesa Holmström
19 sierpnia 2016

Wykonane przez Brendana Mullinsa
16 sierpnia 2016

Responsywne Magic Line Pagination

Stwórz magiczną linię dla swojej paginacji. To wygląda niesamowicie.
Wykonane przez Ryana Yu
18 lutego 2015

Responsywny, dostępny, alternatywny eksperyment z paginacją.
Wykonane przez Simona Goellnera
11 listopada 2014

Demo GIF: strzałki stronicowania

Wyginanie strzałek stronicowania.
Wykonane przez Hakima El Hattab
18 października 2013 r.

W tym artykule rozważymy proces tworzenia takiego elementu interfejsu internetowego jako bloku nawigacyjnego do paginacji. W Bootstrap 3 i 4 ten element interfejsu użytkownika jest zaimplementowany przy użyciu komponentu Pagination.

Co to jest paginacja?

Paginacja to paginacja danych. Tych. to jest wniosek kiedy dane są wyprowadzane nie wszystkie na raz, ale drobne części (strony).

Do poruszania się po tych częściach (stronach) używany jest blok nawigacyjny.

Komponent Pagination frameworku Bootstrap jest przeznaczony tylko do tworzenia tego elementu interfejsu, tj. blok nawigacyjny.

Tworzenie bloku nawigacyjnego do paginacji

W Bootstrap 3 blok nawigacji ma następującą strukturę:

Element nav w tym fragmencie pełni rolę owijającego kontenera. Jest to potrzebne w tej strukturze tylko po to, aby technologie wspomagające postrzegał ten fragment kodu HTML jako nawigację.

Ponadto pożądane jest, aby technologie wspomagające wyjaśniały, jaki to rodzaj bloku nawigacyjnego. Ta akcja jest wykonywana poprzez atrybut aria-label.

Znaczniki bloku nawigacyjnego dla paginacji w Bootstrap są wykonywane za pomocą lista punktowana. Każde łącze nawigacyjne w tym bloku jest elementem owiniętym w li i umieszczonym w ul .

Projekt wizualny pola nawigacyjnego w Bootstrap odbywa się przy użyciu klasy paginacji, którą należy dodać do ul .

Struktura bloku nawigacyjnego w Bootstrap 4 :

Zauważ, że w Bootstrap 4 elementy li i a muszą mieć . li to element strony , a to link do strony . Te klasy ustawiają style CSS dla elementów i są wymagane do poprawnego wyświetlania bloku nawigacyjnego.

Używaj ikon lub ikon zamiast etykiet tekstowych

Przykład paska nawigacyjnego dla stronicowania, który używa ikon jako treści dla niektórych linków:

Zmiana stanu łącza nawigacyjnego

Zmiana stanu łączy w pasku nawigacyjnym odbywa się za pomocą klas wyłączonych i aktywnych. Pierwsza klasa ( wyłączone ) służy do tworzenia nieaktywnego (nieklikalnego) linku. Druga klasa ( aktywna ) jest potrzebna do podświetlenia (wskazania) bieżąca strona. Musisz dodać aktywne i wyłączone klasy nie do samego łącza, ale do elementu li.

Wyłączona klasa ustawia wskaźnik-events deklaracji linków CSS: none . Niniejsza deklaracja ma na celu wyłączenie funkcjonalności linku. Ale nie uniemożliwia przełączenia się na nią za pomocą klawiatury. Dlatego jeśli chcesz całkowicie wyłączyć funkcjonalność takich linków w swoim projekcie, musisz dodatkowo śledzić je za pomocą JavaScript i dodać do nich atrybut tabindex="-1".

Innym sposobem wyłączenia funkcjonalności łącza jest: nie używaj elementu a.

Zmiana rozmiaru bloku nawigacyjnego

W Bootstrap 3 i 4 możesz zmienić rozmiar pola nawigacji za pomocą klas pagination-lg i pagination-sm. Odbywa się to poprzez dodanie jednej z tych klas do klasy paginacji.

Pierwsza klasa ( pagination-lg ) jest używana, gdy rozmiar nawigacji musi zostać zwiększony, a druga ( pagination-sm ) jest używana, gdy rozmiar nawigacji musi zostać zmniejszony.

Wyrównanie bloku nawigacyjnego

W Bootstrap 3 wyrównanie paska nawigacyjnego dla stronicowania odbywa się za pomocą klasy wyrównania tekstu.

W Bootstrap 4 wyrównanie paska nawigacyjnego dla stronicowania odbywa się za pomocą klas flex.

Komponent pagera (Bootstrap 3)

Pager to składnik Bootstrap 3 zaprojektowany do tworzenia prostej nawigacji po stronach lub innej zawartości witryny. Ten komponent składa się z 2 przycisków (linków).

Jednym z najczęstszych zastosowań tej nawigacji jest uczynienie jej tak, aby pierwszy przycisk nawigował do nowszego wpisu na stronie, a drugi - do starszego.

Składnia komponentu pagera:

Zmień układ przycisków

Domyślnie przyciski komponentu Pager wyśrodkowany. Ale oprócz tej opcji Bootstrap 3 pozwala im wyrównać na różnych krawędziach. Odbywa się to poprzez dodanie klasy przed pierwszym przyciskiem i obok drugiego. Poprzednia klasa wyrównuje łącze do lewej, a obok do prawej.

Wyłączanie funkcji przycisku

Przełączanie przycisku w stan wyłączenia odbywa się poprzez dodanie do niego wyłączonej klasy.

Strony internetowe zazwyczaj zawierają kilka stron. Mogą znajdować się jako 3-5 stron, na przykład na landing page, a może więcej, dużo więcej.

Każda dobra witryna powinna zawierać nawigację, która pozwoli użytkownikowi na prawidłowe poruszanie się i poruszanie się między stronami serwisu. Możesz stworzyć taką paginację za pomocą JavaScript. W tym artykule porozmawiamy o tym, jak stworzyć taką nawigację.

Kolejny punkt, oprócz zwykłego JavaScript, przykład wykorzystuje Bootstrap 4. Jego komponent paginacji bootstrap jest połączony z biblioteką JQuery, a mianowicie specjalną wtyczką Buzina Pagination. Pozwala rozbić wszystkie informacje na kilka stron z utworzeniem nawigacji między nimi.

Łączenie niezbędnych ram

Aby pracować z Bootstrap i JQuery, musisz je dołączyć. Można to zrobić w dokumencie HTML za pomocą tagów