jqueryでページングを実装する方法

jQuery でページングを実装するには、プラグインまたはカスタム実装を使用できます。カスタム実装方法: 1. HTML でページングを表示するコンテナを作成する; 2. JavaScript で jQuery を使用してページング ボタンを生成し、クリック イベント ハンドラー関数をバインドしてページング機能を実装する; 3. showPage 関数で開始と終了を計算する現在のページ番号に基づいて位置を決定し、この位置に基づいてページ番号に対応するデータを表示します。

jQuery でページングを実装するには、プラグインまたはカスタム実装を使用できます。以下は簡単なカスタム実装方法です:

まず、ul 要素などのページネーションを表示するコンテナを HTML で作成する必要があります:

<ul id="pagination"></ul>

次に、それを JavaScript で使用します。jQuery が生成するページング ボタンとバインド クリック イベント ハンドラーを使用してページング関数を実装します。

// 假设总共有50条数据，每页显示10条
var totalItems = 50;
var itemsPerPage = 10;
var totalPages = Math.ceil(totalItems / itemsPerPage);
// 生成分页按钮
for (var i = 1; i <= totalPages; i++) {
  $(&#39;#pagination&#39;).append(&#39;<li><a href="#" class="page">' + i + '</a></li>');
}
// 默认显示第一页的数据
showPage(1);
// 分页按钮点击事件处理函数
$('.page').on('click', function() {
  var page = $(this).text();
  showPage(page);
});
// 显示对应页码的数据
function showPage(page) {
  // 根据页码计算起始和结束位置
  var start = (page - 1) * itemsPerPage;
  var end = start + itemsPerPage;
  
  // 显示对应页码的数据
  // ...
}

showPage 関数では、現在のページ番号に基づいて開始位置と終了位置を計算し、これに基づいてページ番号に対応するデータを表示します。位置。ここでのデータ表示方法は、状況に応じてお客様自身で実装することができます。

以上がjqueryでページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。