jQuery-Pagination-Plugin: jqPaginator

Dieser Artikel wird ein sehr beeindruckendesjQuery-Pagination-Plugin:jqPaginator vorstellen.

jqPaginator ist eine saubere, hochgradig anpassbare jQuery-Pagination-Komponente, die für eine Vielzahl von Anwendungsszenarien geeignet ist.

Einführung

Im Internet gibt es viele Pagination-Komponenten, aber es ist schwierig, eine zu finden, die vollkommen zufriedenstellend ist, deshalb wurde jqPaginator ins Leben gerufen.

Die ideale Pagination-Komponente, wie ich sie mir vorstelle, sollte nicht durch CSS-Frameworks eingeschränkt sein und in Webseiten unterschiedlicher Stile verwendet werden können. Aufgrund meiner begrenzten Erfahrung ist der Schlüssel zur Erreichung dieses Ziels eine hochgradig anpassbare HTML-Struktur. Daher bemüht sich jqPaginator, Anpassungen in einem vernünftigen Rahmen zu bieten, was es flexibel für verschiedene Szenarien einsetzbar macht.

Bildschirmfoto:

Nutzung

Beispiel

Die Verwendung ist sehr einfach: Zuerst jQuery und jqPaginator einbinden, dann kann die Pagination initialisiert werden.

$('#id').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,

    first: '<li class="first"><a href="#">First</a></li>',
    prev: '<li class="prev"><a href="#">Previous</a></li>',
    next: '<li class="next"><a href="#">Next</a></li>',
    last: '<li class="last"><a href="#">Last</a></li>',
    page: '<li class="page"><a href="#">{{page}}</a></li>',
    onPageChange: function (num) {
        $('#text').html('当前第' + num + '页');
    }
});

Das obige Beispiel ist die erste Demo, eine Pagination im Bootstrap-Stil. Die spezifischen Parameter werden später vorgestellt. Was Sie hier wissen müssen, ist, dass, wenn Sie eine Klasse anstelle einer ID verwenden, alle Elemente dieser Klasse initialisiert werden, wodurch der oben gezeigte Effekt "zwei verknüpfte Paginationen" erzielt wird.

Parameters

Parameter	Standardwert	Beschreibung
totalPages	0	Legt die Gesamtzahl der Seiten für die Pagination fest.
totalCounts	0	Legt die Gesamtzahl der Einträge für die Pagination fest.
pageSize	0	Legt die Anzahl der Elemente pro Seite fest. Hinweis: Legen Sie entweder totalPages fest oder setzen Sie totalCounts + pageSize, andernfalls wird ein Fehler ausgelöst; nach dem Festlegen von totalCounts und pageSize wird totalPages automatisch berechnet.
currentPage	1	Legt die aktuelle Seitenzahl fest.
visiblePages	7	Legt die maximale Anzahl der angezeigten Seitenzahlen fest (zum Beispiel, wenn es 100 Seiten gibt und die aktuelle Seite 1 ist, werden die Seiten 1 - 7 angezeigt).
disableClass	'disabled'	Legt den Stil für den "deaktivierten Zustand" für die erste Seite, die vorherige Seite, die nächste Seite und die letzte Seite fest.
activeClass	'active'	Legt den Stil für die aktuelle Seitenzahl fest.
first	(None)	Legt die HTML-Struktur von "First" fest.
prev	(None)	Legen Sie die HTML-Struktur von "Zurück" fest.
next	(None)	Legen Sie die HTML-Struktur von "Weiter" fest.
last	(None)	Legen Sie die HTML-Struktur von "Letzte" fest.
page	(None)	Legen Sie die HTML-Struktur für Seitenzahlen fest, in der Sie{{page}} verwenden können,um die aktuelle Seite darzustellen,{{totalPages}}um die Gesamtzahl der Seiten darzustellen,{{totalCounts}}um die Gesamtzahl der Elemente darzustellen (zum Beispiel: Die oben gezeigte Demo im "minimalistischen Stil" verwendet {{placeholder}} und setzt visiblePages auf 1, um dies zu erreichen.)
wrapper	(None)	HTML-Wrapper für die Paginierungsstruktur, zum Beispiel: , normalerweise nicht erforderlich.
onPageChange	(None)	Callback-Funktion, die ausgelöst wird, wenn sich die Seite ändert (einschließlich beim Initialisieren der ersten Seite). Sie empfängt die Seitennummer der "Zielseite".

Erweiterungsmethoden

jqPaginator bietet zwei Erweiterungsmethoden, um die Komponente nach der Initialisierung bequem zu bedienen.

$('#id').jqPaginator('option', options)

Die Konfiguration nach der Initialisierung dynamisch ändern.

$('#id').jqPaginator('option', {
    currentPage: 1
});

$('#id').jqPaginator('destroy')

jqPaginator zerstören.

$('#id').jqPaginator('destroy');