So verwenden Sie Pagination in HTML -Tabellen mit JavaScript

Die Paginierung wird zu Tabellen hinzugefügt, um die Benutzererfahrung zu verbessern, indem eine große Menge an Daten in kleinere, überschaubare Stücke zerlegt wird. Dadurch können Benutzer einfach durch die Daten navigieren, indem sie jeweils eine Seite anzeigen, anstatt durch eine überwältigende Menge an Informationen zu scrollen zu müssen. Darüber hinaus kann Pagination dazu beitragen, die Leistung zu verbessern, indem die Datenmenge reduziert werden, die sofort geladen werden müssen.

In diesem Beitrag wird der Prozess definiert, um die Pagination in HTML -Tabellen mithilfe von JavaScript zu verwenden.

So verwenden Sie Pagination in HTML -Tabellen mit JavaScript?

In der Pagination wird der Inhalt in kleine Stücke unterteilt, um auf den verschiedenen Seiten anzuzeigen, indem Sie auf die Tasten klicken, die auf den Seiten navigieren.

Beispiel

Sehen wir uns das angegebene Beispiel an, um den Prozess des Erstellens von Paginierung in HTML -Tabellen in JavaScript zu verstehen. Es wird zwei Schritte dauern:

• Erstellen Sie eine Tabelle in einer HTML -Datei
• Stellen Sie die Paginierung in der JavaScript -Datei fest

Schritt 1: Fügen Sie die Tabelle in der HTML -Datei hinzu

Erstellen Sie zunächst eine Tabelle in einer HTML -Datei mit der “

" Schild:

Name	Alter	Beitrittsdatum	Bezeichnung
Maria	28	16may2022	HR
Steven	29	18. Mai 2020	Assistent
John	32	15March2017	Buchhalter
Covin	25	14APRIL2019	Mto
Kain	27	5SEP2019	Assistent
Marco	23	21Jan2018	Konten
Rhonda	24	3Jan2020	HR
Peale	30	25March2018	HR
Dan	21	9July2021	Assistent
Susan	28	28nov2022	Mto
Covey	29	6July2021	Konten

Schritt 2: Stellen Sie die Paginierung der Tabelle in JavaScript fest

Wenden Sie nun in der JavaScript -Datei den Paginationsprozess auf der Tabelle an. Zuerst erhalten wir das Tabellenelement mit dem “GetElementById ()" Methode:

var table = document.GetElementById ("Empinfo");

Stellen Sie die Anzahl der Tabellenzeilen auf die Anzeige pro Seite fest:

var rowsperpage = 5;

Holen Sie sich die Gesamtzahl der Zeilen der Tabelle mit der “Länge"Eigenschaft und speichern Sie es in einer Variablen"Reihenanzahl”:

var rowCount = Tabelle.Reihen.Länge;

Holen Sie sich den Tag -Namen der ersten Zelle der Tabelle in der ersten Zeile und prüfen Sie, ob die Tabelle eine Kopfreihe hat, die einen booleschen Wert zurückgibt:

var tablehead = table.Zeilen [0].FirstElementChild.tagname === "th";

Erstellen Sie ein Array, um jede Zeile der Tabelle zu halten, um auf den Seiten angezeigt zu werden:

var tr = [];

Erstellen wir einen Schleifenzähler, um die Anzahl aus der 2. Zeile der Tabelle zu starten:

var i, ii, j = (tablehead) ? 1: 0;

Erstellen Sie eine Variable “thDas enthält die erste Zeile der Tabelle, die Tischkopf ist Verwenden des ternären Operators:

var th = (Tablehead ? Tisch.Zeilen [(0)].outerhtml: "");

Rufen Sie nun die Mathematik an.CEIL () Methode zum Zählen der Anzahl der Seiten durch Teilen der Gesamtzeilen einer Tabelle nach Anzahl der Zeilen, die pro Seite angezeigt werden sollen:

var pagecount = math.Ceil (Tabelle.Reihen.Länge / RowsperPage);

Überprüfen Sie die Seitenzahl und setzen Sie den Inhalt auf den Seiten fest:

if (pagecount> 1)
für (i = j, ii = 0; i < rowCount; i++, ii++)
TR [ii] = Tabelle.Zeilen [i].outerhtml;

Tisch.InsertAdjacenthtml ("Afterend", ","
sortieren (1);

Im obigen folgenden Code:

• Iterieren Sie die Tabelle mit “für”Schleifen und zuweisen Sie jede Zeile, einschließlich ihres Tag -Namens mit seinem Inhalt dem Array.
• Erstellen Sie ein neues DIV, das die Tasten enthält.
• Ruf den "Sortieren()Funktion durch Übergeben 1, was angibt, dass die Standardseite die erste Seite ist.

Stellen Sie den Inhalt auf der Seite fest, indem Sie Seiten erstellen, während Sie auf die Schaltfläche des Benutzers klicken. Um dies zu tun:

• Erstens werden wir eine Funktion namens "definieren"Sortieren()Das wird eine Seite als Parameter erfolgen, wenn der Benutzer auf die angegebene Schaltfläche klickt.
• Anschließend werden Zeilen auf der Seite angezeigt, indem die erste Zeile als dauerhaft angezeigt wird, dh Tabellenkopf (en).
• Erstellen Sie schließlich die Paginationstasten, indem Sie das aufrufen “PageButtons ()Funktion:

FunktionenSort (Seite)
var rows = th, s = ((RowSperPage * Seite)- RowSperPage);
für (i = s; ich < (s + rowsPerPage) && i < tr.length; i++)
Zeilen += tr [i];
Tisch.Innerhtml = Zeilen;
dokumentieren.GetElementById ("Buttons").Innerhtml = PageButtons (PageCount, Seite);

Erstellen Sie jetzt Schaltflächen “vorherige" Und "nächsteSchaltflächen mit Paginierungsschaltflächen basierend auf den Seitenzahlen:

Funktion Pagebuttons (PageCount, aktuell)
var prevbutton = (Strom == 1)? "Behinderte" : "";
var Nextbutton = (Strom == PageCount)? "Behinderte" : "";
var buttons = "für (i = 1; i <= pageCount; i++)
Buttons += "";

Schaltflächen += "'onclick =' sort (" +(aktuell +1) +") '" +nextbutton +">";
Buttons zurück;

Hier sehen Sie, dass jede Seite einen eindeutigen Inhalt anzeigt, indem Sie auf die Schaltflächen klicken:

Das dreht sich alles um die Pagination auf den HTML -Tabellen in JavaScript.

Abschluss

Erstellen Sie zunächst eine Tabelle in einer HTML -Datei und erstellen Sie dann eine Paginierung in einer JavaScript -Datei, indem Sie ein Array erstellen, das die Zeilen speichert, erstellen Zählen Sie aus der 2. Zeile der Tabelle zum Anzeigen von Zeilen auf den Seiten. Stellen Sie den Tabellenkopf auf jeder Seite als dauerhafte Zeile ein und laden Sie andere Zeilen auf den Seiten basierend auf der Anzahl. In diesem Beitrag wurde der Prozess definiert, um die Pagination in HTML -Tabellen mithilfe von JavaScript zu verwenden.