Einfache Paginierung in JavaScript
- Benutzerdefinierte Paginierungsfunktion zum Paginieren von Webseiten
-
Verwendung des
Jquery-Pluginspagination.jszum Surfen auf Webseiten
In JavaScript definieren wir oft unsere bevorzugten Funktionsumfänge, um bestimmte Aktivitäten zu extrahieren. Die Paginierung in JavaScript kann manuell mit der Kombination mehrerer Funktionen skriptgesteuert werden.
Wir zeigen Ihnen, wie Sie eine Paginierung erstellen, um von Seite zu Seite zu surfen. Wir werden grundlegende Paginierungsfunktionen erstellen, um es zu bedienen, und wir werden auch ein weiteres Beispiel mit dem jquery-Plugin pagination.js sehen, das unsere Codierungserfahrung erleichtern wird.
Benutzerdefinierte Paginierungsfunktion zum Paginieren von Webseiten
Wir werden zunächst das Objekt deklarieren, das unsere Daten enthält. Der nächste Schritt besteht darin, alle Daten zu zählen und wie viel wir auf einer Seite in der Vorschau anzeigen möchten. Dabei erfahren wir auch die Gesamtzahl der Seiten unserer Webseite.
Nachdem die Funktion totNumPages unsere Gesamtseitenzahl berechnet hat, erstellen wir die Basisfunktion, um prev und next zu treffen.
Lassen Sie uns den Codeblock überprüfen, um eine klare Vorstellung zu haben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="TableList"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a><br>
page: <span id="page"></span>
</body>
</html>
var obj = [
{number: 'Number 1'}, {number: 'Number 2'}, {number: 'Number 3'},
{number: 'Number 4'}, {number: 'Number 5'}, {number: 'Number 6'},
{number: 'Number 7'}, {number: 'Number 8'}, {number: 'Number 9'},
{number: 'Number 10'}, {number: 'Number 11'}, {number: 'Number 12'},
{number: 'Number 13'}, {number: 'Number 14'}, {number: 'Number 15'}
];
var current_page = 1;
var obj_per_page = 3;
function totNumPages() {
return Math.ceil(obj.length / obj_per_page);
}
function prevPage() {
if (current_page > 1) {
current_page--;
change(current_page);
}
}
function nextPage() {
if (current_page < totNumPages()) {
current_page++;
change(current_page);
}
}
function change(page) {
var btn_next = document.getElementById('btn_next');
var btn_prev = document.getElementById('btn_prev');
var listing_table = document.getElementById('TableList');
var page_span = document.getElementById('page');
if (page < 1) page = 1;
if (page > totNumPages()) page = totNumPages();
listing_table.innerHTML = '';
for (var i = (page - 1) * obj_per_page; i < (page * obj_per_page); i++) {
listing_table.innerHTML += obj[i].number + '<br>';
}
page_span.innerHTML = page;
if (page == 1) {
btn_prev.style.visibility = 'hidden';
} else {
btn_prev.style.visibility = 'visible';
}
if (page == totNumPages()) {
btn_next.style.visibility = 'hidden';
} else {
btn_next.style.visibility = 'visible';
}
}
window.onload = function() {
change(1);
};
Ausgabe:
In diesem Fall spielt die Funktion change eine wichtige Rolle, um die Navigation und die Objektbeschränkungen pro Seite zu visualisieren. Auch die Sichtbarkeit von prev und next Klicks auf der ersten und letzten Seite. Bei jedem Laden der Seite und nach jedem Neuladen wird die Standardseite auf page 1 gesetzt.
Verwendung des Jquery-Plugins pagination.js zum Surfen auf Webseiten
Das Jquery-Plug-in hat den Weg erleichtert, Paginierung in Webseiten zu implementieren. Sie müssen das CDN für das Plugin im Abschnitt header hinzufügen, um vordefinierte Konventionen einfach zu importieren, um die Paginierungserstellung zu bewältigen.
Im folgenden Beispiel definieren wir eine Datenquelle. Die Datenquelle kann als array, Objekt, URL, JSON und ähnliche Formate initialisiert werden. In diesem Plugin funktionieren mehrere Parameter. Zum Beispiel können wir pageSize:10 hinzufügen, um Einträge pro Seite auszuwählen.
Lassen Sie uns zuerst in den Codeblock eintauchen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>
<div>
<section>
<div id="container"></div>
<div id="pagination"></div>
</section>
</div>
<script>
$(function () {
let container = $('#pagination');
container.pagination({
dataSource: [
{number: "Number 1"},
{number: "Number 2"},
{number: "Number 3"},
{number: "Number 4"},
{number: "Number 5"},
{number: "Number 6"},
{number: "Number 7"},
{number: "Number 8"},
{number: "Number 9"},
{number: "Number 10"},
{number: "Number 11"},
{number: "Number 12"},
{number: "Number 13"},
{number: "Number 14"},
{number: "Number 15"},
{number: "Number 16"},
{number: "Number 17"},
],
pageSize: 5,
callback: function (data, pagination) {
var dataHtml = '<ul>';
$.each(data, function (index, item) {
dataHtml += '<li>' + item.number + '</li>';
});
dataHtml += '</ul>';
$("#container").html(dataHtml);
}
})
})
</script>
</body>
</html>
Ausgabe:
Der Code wird kleiner und der Aufwand für die Generierung von Funktionen sinkt. Es ist lediglich erforderlich, sich auf die Schlüsselwörter oder den Konstruktor zu konzentrieren, die die angegebenen Parameter definieren, um die Navigation schnell von Seite zu Seite zu ändern.
Eine detailliertere Erklärung und Verwendung des Plugins finden Sie in der Dokumentation hier.
