So verwenden Sie Bootstrap -Pagination

Die Bootstrap Paging -Komponente kann lange Datensätze pagieren, sodass Benutzer die Seiten problemlos durchsuchen können. Verwenden Sie: 1. Erstellen Sie eine Paging -Liste; 2. Fügen Sie Paging -Elemente hinzu und fügen Sie Links hinzu. 3.. Seitennummern angeben; 4. Markierte Elemente markieren; 5. Verwenden Sie Paging -Event -Handler. Beispielcode: html

<li> 1 <li>

So verwenden Sie Bootstrap -Pagination

Die Bootstrap -Paging -Komponente bietet eine Methode zum Paginieren großer Datensätze. Es bietet eine einfache und elegante Möglichkeit, lange Datenlisten zu verarbeiten, während Benutzer die Seite problemlos durchsuchen können.

Wie man verwendet:

Befolgen Sie die folgenden Schritte, um Bootstrap Paging zu verwenden:

<li> Erstellen Sie eine Paging -Liste: Erstellen Sie eine ungeordnete Liste mit dem <ul></ul> Element. <li> Fügen Sie ein Paging -Element hinzu: Fügen Sie der Liste <ul></ul> ein <li> Element hinzu, um jedes Paging -Element darzustellen. <li> Fügen Sie einen Paging -Link hinzu: Fügen Sie dem Element <li> ein <a></a> Element hinzu, das einen Paging -Link enthält. <li> Seitennummer angeben: Verwenden Sie data-page -Attribut im Element <a></a> um die Seitennummer anzugeben. <li> Markieren Sie aktive Elemente als aktiver Status: Verwenden Sie active Klassen, um das aktuelle aktive Seitenelement zu markieren. <li> Verwenden Sie Pagination Event -Handler: Fügen Sie einen click -Event -Handler hinzu und verarbeiten Sie Ereignisse, wenn der Benutzer auf ein Paginierungselement klickt.

Beispiel:

 <code class="html"><ul class="pagination"> <li class="page-item"><a class="page-link" data-page="1">1</a></li> <li class="page-item"><a class="page-link" data-page="2">2</a></li> <li class="page-item"><a class="page-link" data-page="3">3</a></li> <li class="page-item active"><a class="page-link" data-page="4">4</a></li> <li class="page-item"><a class="page-link" data-page="5">5</a></li> </ul></code>

Pagination Event Handler:

Verwenden Sie den folgenden JavaScript -Code, um Paging -Ereignisse zu verarbeiten:

 <code class="javascript">$(".pagination").on("click", ".page-link", function(e) { e.preventDefault(); var page = $(this).data("page"); // 在这里处理分页逻辑});</code>

Andere Optionen:

Die Bootstrap Paging -Komponente bietet auch andere Optionen, wie z. B.:

<li> Deaktivierte Elemente ( disabled Klasse) <li> Ziehen und Ausrichten ( justify-content-* -Klasse) <li> Stilthema ( pagination-* Klasse)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Bootstrap -Pagination. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!