Jak używać paginacji w tabelach HTML za pomocą JavaScript

Do tabel dodaje się paginacja, aby poprawić wrażenia użytkownika poprzez zerwanie dużej ilości danych na mniejsze, łatwiejsze do zarządzania fragmenty. Umożliwia użytkownikom łatwą poruszanie się po danych, przeglądając jedną stronę na raz, zamiast przewijać przytłaczającą ilość informacji. Ponadto paginacja może pomóc poprawić wydajność, zmniejszając ilość danych, które należy jednocześnie załadować.

Ten post zdefiniuje proces stosowania paginacji w tabelach HTML za pomocą JavaScript.

Jak używać paginacji w tabelach HTML za pomocą JavaScript?

W paginacji zawartość jest podzielona na małe fragmenty, aby wyświetlić na różnych stronach, klikając przyciski, które poruszają się po stronach.

Przykład

Zobaczmy podany przykład, aby zrozumieć proces tworzenia paginacji na tabelach HTML w JavaScript. To podejmie dwa kroki:

• Utwórz tabelę w pliku HTML
• Ustaw paginację w pliku JavaScript

Krok 1: Dodaj tabelę w pliku HTML

Najpierw utwórz tabelę w pliku HTML, używając „

”Tag:

Nazwa	Wiek	Data dołączenia	Przeznaczenie
Mary	28	16 May2022	Hr
Steven	29	18 May2020	Asystent
Jan	32	15march2017	Księgowy
Covin	25	14 kwietnia 2019	MTO
Kain	27	5 września 2019	Asystent
Marco	23	21 Jan2018	Konta
Rhonda	24	3Jan2020	Hr
Peale	30	25 March2018	Hr
Dan	21	9 lipcu2021	Asystent
Susan	28	28NOV2022	MTO
Stado kuropatw	29	6 lipcu2021	Konta

Krok 2: Ustaw paginację tabeli w JavaScript

Teraz, w pliku JavaScript, zastosuj proces paginacji na tabeli. Aby to zrobić, najpierw otrzymamy element tabeli za pomocą „getElementById ()" metoda:

var tabela = dokument.getElementById („empinfo”);

Ustaw liczbę wierszy tabeli na wyświetlanie na stronę:

VAR ROWSPERPAGE = 5;

Uzyskaj całkowitą liczbę rzędów tabeli za pomocą „długość„Własność i przechowuj w zmiennej”Liczba wierszy”:

var rowCount = tabela.wydziwianie.długość;

Uzyskaj nazwę znacznika pierwszej komórki tabeli w pierwszym rzędzie i sprawdź, czy tabela ma wiersz główny, który zwróci wartość logiczną:

var tableHead = tabela.rzędy [0].FirstelementChild.tagname === „th”;

Utwórz tablicę, aby przytrzymać każdy wiersz tabeli, aby wyświetlić na stronach:

var tr = [];

Utwórzmy licznik pętli do rozpoczęcia liczby z 2. rzędu tabeli:

var i, ii, j = (stółowy) ? 1: 0;

Utwórz zmienną „th„To utrzymuje pierwszy rząd tabeli, który jest głową stołową Korzystanie z operatora trójskładnikowego:

var th = (główek stołowy ? tabela.rzędy [(0)].OUTERHTML: „”);

Teraz zadzwoń do matematyki.Metoda suw () do zliczania liczby stron poprzez podzielenie całkowitej wierszy tabeli według liczby wierszy do wyświetlania na stronę:

var pagecount = matematyka.CEL (Tabela.wydziwianie.długość / worksperpage);

Sprawdź liczbę stron i ustaw treść na stronach:

if (pagecount> 1)
dla (i = j, ii = 0; i < rowCount; i++, ii++)
Tr [ii] = tabela.rzędy [i].OUTERHTML;

tabela.insertadjacenthtml („Afterend”, "
sort (1);

W powyższym następującym kodzie:

• Iteruj tabelę za pomocą „Do”Pętla i przypisz każdy wiersz, w tym nazwę znacznika z treścią do tablicy.
• Utwórz nową div, która trzyma przyciski.
• Zadzwoń do "sortować()„Funkcja, przekazując 1, która wskazuje, że strona domyślna będzie pierwszą stroną.

Ustaw zawartość na stronie, tworząc strony podczas klikając przycisk użytkownika. Zrobić to:

• Najpierw zdefiniujemy funkcję zwaną „sortować()”To podejmie stronę jako parametr, gdy użytkownik kliknie określony przycisk.
• Następnie wiersze zostaną wyświetlone na stronie, wyświetlając pierwszy wiersz jako stały, to znaczy głowic stołowych.
• Na koniec utwórz przyciski paginacji, nazywając „pageButtons ()”Funkcja:

Functionsort (strona)
var rządy = th, s = ((RowSperPage * strona)- RowSperPage);
dla (i = s; i < (s + rowsPerPage) && i < tr.length; i++)
rzędy += tr [i];
tabela.innerHtml = wiersze;
dokument.getElementById („przyciski”).innerHtml = pageButtons (Pagecount, strona);

Teraz utwórz przyciski ”poprzedni" I "Następny” buttons with pagination buttons based on the page counts:

funkcja pageButtons (Pagecount, Current)
var Prevbutton = (prąd == 1)? "wyłączony" : "";
var następnybutton = (prąd == pagecount)? "wyłączony" : "";
var przyciski = "dla (i = 1; i <= pageCount; i++)
przyciski += "";

przyciski += "'onClick =' sort (" +(current +1) +") '" +NextButton +">";
Przyciski powrotu;

Tutaj możesz zobaczyć każdą stronę pokazuje unikalną treść, klikając przyciski:

Chodzi o paginację na tabelach HTML w JavaScript.

Wniosek

Aby używać paginacji w tabelach HTML, najpierw utwórz tabelę w pliku HTML, a następnie utwórz paginację w pliku JavaScript, tworząc tablicę, która przechowuje wiersze, ustaw liczbę wierszy do wyświetlania na stronę, utwórz licznik pętli, aby rozpocząć Policz z 2. rzędu tabeli w celu wyświetlania wierszy na stronach. Ustaw głowicę tabeli jako stały wiersz na każdej stronie i załaduj inne wiersze na stronach na podstawie liczby. Ten post zdefiniował proces stosowania paginacji w tabelach HTML za pomocą JavaScript.