ブートストラップページネーションの使用方法

ブートストラップのページングコンポーネントは、長いデータセットをページングすることができ、ユーザーはページを簡単に閲覧できるようになります。使用方法：1。ページングリストを作成します。 2.ページングアイテムを追加し、リンクを含めます。 3.ページ番号を指定します。 4.アクティブアイテムをマークします。 5.ページングイベントハンドラーを使用します。サンプルコード：html

<li> 1 <li>

ブートストラップページネーションの使用方法

ブートストラップページングコンポーネントは、大きなデータセットをページングする方法を提供します。これは、ユーザーがページを簡単に閲覧できるようにしながら、データの長いリストを処理するためのシンプルでエレガントな方法を提供します。

使い方：

ブートストラップページングを使用するには、次の手順に従ってください。

<li> ページングリストを作成する： <ul></ul>要素を使用して、順序付けられていないリストを作成します。 <li> ページングアイテムを追加： <li>要素を<ul></ul>リストに追加して、各ページングアイテムを表します。 <li> ページングリンクを追加：ページングリンクを含む<a></a>要素を<li>要素に追加します。 <li> ページ番号の指定： <a></a>要素のdata-page属性を使用して、ページ番号を指定します。 <li> アクティブアイテムをアクティブステータスとしてマークします。 activeクラスを使用して、現在のアクティブページアイテムをマークします。 <li> ページネーションイベントハンドラーを使用： clickイベントハンドラーを追加し、ユーザーがページネーションアイテムをクリックしたときにイベントを処理します。

例：

 <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>

ページネーションイベントハンドラー：

ページングイベントを処理するには、次のJavaScriptコードを使用します。

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

その他のオプション：

ブートストラップページングコンポーネントは、次のような他のオプションも提供します。

<li>無効なアイテム（ disabledクラス） <li>引っ張りと調整（ justify-content-* class） <li>スタイルテーマ（ pagination-*クラス）

以上がブートストラップページネーションの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。