Prosta paginacja w JavaScript

Strony internetowe często używają paginacji, która jest procesem łamania treści na wiele stron. Umożliwia użytkownikom łatwą poruszanie się po dużych ilościach treści, dzięki czemu jest łatwiejsza do zarządzania i mniej przytłaczająca. Poprawia ogólny czas ładowania strony internetowej. Paginacja ułatwia również programistom zarządzanie danymi i pobieranie danych z baz danych, szczególnie w przypadku dużych ilości danych.

Ten post opisuje procedurę tworzenia paginacji w JavaScript.

Jak stworzyć prostą paginację w JavaScript?

Pomysł paginacji JavaScript wykorzystuje „Następny" I "Poprzedni”Przyciski lub linki do nawigacji między stronami. Podstawowym celem paginacji jest umożliwienie użytkownikom szybkiego nawigacji przez treść poprzez klikając linki lub przyciski.

Spójrzmy na przykład, aby zrozumieć proces tworzenia prostej paginacji w JavaScript. To podejmie trzy kroki.

Krok 1: Dodaj zawartość w pliku HTML
Najpierw utwórz treść, która chce wyświetlić na stronie internetowej. Tutaj utworzymy uporządkowaną listę za pomocą HTML ”ol„Tag, który przechowuje listy języków programowania, owoców, liczenia i dni tygodnia. Wszystkie te listy zostaną wydrukowane na różnych stronach przy użyciu techniki paginacji:

1. Html


2. CSS


3. JavaScript


4. Węzeł JS


5. Jawa


6. C++


7. C#


8. Pyton


9. SQL


10. Visual Basic


11. Jabłko


12. Banan


13. Winogrona


14. Pomarańczowy


15. wiśnia


16. Gruszka


17. Mango


18. Truskawka


19. Arbuz


20. Granat


21. Jeden


22. Dwa


23. Trzy


24. Cztery


25. Pięć


26. Sześć


27. Siedem


28. Osiem


29. Dziewięć


30. Dziesięć


31. Poniedziałek


32. Wtorek


33. Środa


34. Czwartek


35. Piątek


36. Sobota


37. Niedziela

Krok 2: Styl treści i przycisków za pomocą CSS
Następnie stygnij zawartość, przyciski i akcje wykonywane przez przyciski, takie jak Kolor Zmień na zawisie i tak dalej.

Klasa CSS do stylizacji „Następny”(>) I„poprzedni”(<) buttons are as follows:

.paginacja
szerokość: calc (100% - 2M);
Wyświetlacz: Flex;
Wyrównanie: Center;
Pozycja: absolutna;
Dół: 0;
Wyściółka: 1 REM 0;
Justify-Content: Center;

Do stylizacji dynamicznych przycisków ”1, 2, 3… ”, Użyj następującego kodu CSS:

.Numer paginacji,
.page-buttons
Rozmiar czcionki: 1.1rem;
kolor tła: Lightblue;
Border: Brak;
Margines: 0.25rem 0.25rem;
Kursor: wskaźnik;
Wysokość: 2.5rem;
szerokość: 2.5rem;
Radiusz graniczny: .2M;

Aby zmienić kolor na zawisie przycisków, użyj danej klasy:

.Numer paginacji: zawieszek,
.page-buttons: nie (.niepełnosprawny): Hover
Tło: Lightblue;

W przypadku aktywnych przycisków ustaw różne kolory przycisku za pomocą poniższych właściwości CSS:

.Numer paginacji.Active
kolor: #fff;
Tło: #0c313f;

Ta klasa CSS jest używana do stylizacji listy do wyświetlania na stronie internetowej:

.Olstyle
Wyświetlacz: Block Inline;
Text-Align: lewy;

Gdy trzeba ukryć dowolny przycisk lub dowolną zawartość, użyj poniższej klasy CSS:

.ukryty
Nie wyświetla się;

Krok 3: Utwórz prostą paginację za pomocą JavaScript
Teraz, w pliku JavaScript, użyj następującego kodu, aby utworzyć kontener do paginacji:

<

>

Poniżej powyżej fragment:

• Najpierw utwórz pojemnik na przyciski paginacji za pomocą „div”Element i przypisz klasę CSS”paginacja„Do stylizacji przycisków.
• Utwórz dwa przyciski („Następny" I "Poprzedni”) Jako przyciski strzałek za pomocą„& Lt" I "& gt".
• Utwórz div dla dynamicznych przycisków na podstawie rozkładu treści.

Tutaj deklarujemy niektóre zmienne, aby ustawić treść paginacji:

const paginationLimit = 10;
const pagecount = matematyka.Ceil (Listitems.długość / paginationLimit);
Niech CurrentPage = 1;

• Najpierw podziel dane lub treść na strony. Możesz to zrobić, ograniczając liczbę elementów na stronę. Tutaj ustawiamy limit strony na „10”, co oznacza, że ​​tylko 10 elementów zostanie wyświetlonych na każdej stronie.
• Podziel całkowitą liczbę pozycji ”Lista przedmiotów.długość" przez "pagininlimit”I okrągłe do najwyższej liczby całkowitej, wykorzystując„Matematyka.stropować()„Metoda zdobycia pagecount.
• Ustaw bieżącą stronę jako „1".

Teraz utwórz jakąś zmienną, która otrzymuje referencje numerów stron, przycisków i listy treści za pomocą przypisanych identyfikatorów:

const paginationnumbers = dokument.getElementById („Page-Numbers”);
const NextButton = Dokument.getElementById („Next-Button”);
const Prevbutton = Dokument.getElementById („prev-button”);
const paginedList = dokument.getElementById („lista”);
const ListItems = paginedList.querySelelectionall („li”);

Zdefiniuj funkcję wyłączania przycisku, gdy lista jest na początku lub na końcu. Oznacza to wyłączenie „Dalej (>)”Przycisk, gdy ostatnia strona jest otwarta, podobnie, wyłączając„poprzedni (<)”Przycisk Po otwarciu pierwszej strony:

const disableButton = (przycisk) =>
przycisk.Lista klas.add („niepełnosprawny”);
przycisk.setAttribute („niepełnosprawny”, true);
;

Podobnie, wyłączenie przycisku, w celu włączenia przycisków paginacji, użyj poniższej funkcji:

const enableButton = (przycisk) =>
przycisk.Lista klas.usuń („niepełnosprawny”);
przycisk.resuseAttribute („niepełnosprawny”);
;

Tutaj obsługujemy status przycisków strony, kiedy zostaną włączone lub po wyłączeniu:

const resPageButsonSstatus = () =>
if (currentPage === 1)
DisableButton (Prevbutton);
w przeciwnym razie
EnableButton (Prevbutton);

if (pagecount === currentPage)
disableButton (NextButton);
w przeciwnym razie
EnableButton (NextButton);

;

Utwórz dynamiczne przyciski zgodnie z długością zawartości i dodaj je do paginowania:

const appendPagenumber = (indeks) =>
const pagenumber = dokument.createElement („przycisk”);
numer strony.className = "pagination-numer";
numer strony.innerHtml = indeks;
numer strony.setAttribute („page-index”, index);
PaginationNumbers.appendchild (pagenumber);
;
const getPaginationNumbers = () =>
dla (niech i = 1; i
dokument.querySelelectionall (".liczba paginacji ”).foreach ((przycisk) =>
przycisk.Lista klas.usuń („aktywny”);
const pageIndex = Number (przycisk.getAttribute („page-index”));
if (pageIndex == currentPage)
przycisk.Lista klas.Dodaj („Active”);

);
;

Dodaj powyższy kod do podanej funkcji, aby za każdym razem ustawiono nową stronę, aktywny numer strony jest aktualizowany:

const setCurrentPage = (pagenum) =>
CurrentPage = pagenum;
HandleactivePagenumber ();
corpagageButsonSstatus ();
const Prevange = (pagenum - 1) * paginationLimit;
const currrange = pagenum * paginallimit;
Lista przedmiotów.foreach ((pozycja, indeks) =>
przedmiot.Lista klas.Dodaj („ukryty”);
if (index> = indeks Prevange && < currRange)
przedmiot.Lista klas.usuń („ukryty”);

);
;

Po kliknięciu przycisku numeru strony użyj słuchacza zdarzeń, aby zadzwonić do „setCurrentPage”Funkcja. Aby kliknąć poprzedni przycisk, przenieś poprzednią stronę, odejmując „1”Z„bieżąca strona”, A do kliknięcia następnego przycisku przejdź na następną stronę, dodając„1" w bieżąca strona”:

okno.addEventListener („ładuj”, () =>
getPaginationNumbers ();
setCurrentPage (1);
Prevbutton.addEventListener („kliknij”, () =>
setCurrentPage (CurrentPage - 1);
);
Następny przycisk.addEventListener („kliknij”, () =>
setCurrentPage (CurrentPage + 1);
);
dokument.querySelelectionall (".liczba paginacji ”).foreach ((przycisk) =>
const pageIndex = Number (przycisk.getAttribute („page-index”));
if (pageIndex)
przycisk.addEventListener („kliknij”, () =>
setCurrentPage (pageIndex);
);

);
);

Wyjście

Chodzi o paginację w JavaScript.

Wniosek

Aby stworzyć prostą paginację w JavaScript, najpierw utwórz pojemnik na element paginacji i listę elementów, które mają być paginowane. Podziel listę pozycji na mniejsze grupy lub „strony”, W oparciu o pożądaną liczbę elementów na stronę. Utwórz przyciski lub linki do nawigacji między stronami i dodaj je do kontenera paginacji. Dodaj słuchaczy zdarzeń do przycisków, aby zaktualizować wyświetlane elementy po kliknięciu. Użyj JavaScript, aby ukryć elementy, których nie ma na aktualnie wyświetlonej stronie i pokazać elementy, które są. Stylizować element paginacji i przyciski zgodnie z potrzebami. W tym poście opisano procedurę tworzenia paginacji w JavaScript.