バニラ JavaScript のページネーション

概要

Web サイトまたは Web アプリケーションを作成するとき、特に多くの機能を備えている場合 テンプレート化 コンテンツ (カテゴリに属する​​グリッドや項目のリストなど) – 一般的には、 ページに分けて 一度に画面に表示されるアイテムの数を減らす。

この記事では、基本的な JavaScript を使用して Web プロジェクトにページネーションを実装する方法を一から学びます。

この記事の目的のために、コンテンツを取得します この API レスポンスの例。 100 個のデータ ポイントが含まれていますが、30 個しか使用せず、一度に画面に 6 つの投稿を表示します。

スタートガイド

ブラウザーに組み込まれている Fetch API を使用して API から必要なすべての投稿をフェッチする前に、後でスクリプトを介して動的に入力される基本的な HTML マークアップを作成する必要があります。

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

REST API 投稿の取得

前述のように、ページネーションとは、コンテンツを小さなチャンクに分割することです。 データをフェッチし、分割するタイミングと方法を決定し、ページ数を計算して、その一部をユーザーに表示する必要があります。 ありがたいことに、通常、バックエンド機能が最初のいくつかのタスクを処理し、関連するページ、ページの総数、およびコンテンツを返します。 1ページあたり.

最初にすべての投稿を取得することから始めましょう。その後、ページごとにいくつかのデータ ポイントのみをクエリするようにこれを修正します。

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

上記のコードを簡単に調べてみましょう。 まず、取得することから始めました。 div を介してすべてのコンテンツを表示する要素 class に割り当てた名前 div. 最後に、フェッチ操作を処理する関数を作成しました。

fetchPosts() 関数、使用した APIをフェッチ から投稿を取得するには JSON プレースホルダー投稿 APIによって参照される JSON データを保存します。 posts 変数と使用された innerHTML 各コンテンツを posts-section それらをループすることによって。

この時点で、すべてのコンテンツを正常に取得できました。

Web ページ内でページネーションを実装するために重要な XNUMX つの変数を宣言することから始めましょう。 最初のものは、 ページごとに宣言したい投稿の数、 そうして 現在のページ番号 (1 デフォルトで)、および 総ページ数.

このガイドでは、 総ページ数 固定数 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

前のセクションでは、すべての投稿を XNUMX つのページに表示しましたが、一度に XNUMX つだけ表示したいと考えています。 したがって、 numberPerPage 〜へ 6 これを使用してフェッチ操作を調整し、表示のみを行います 6 投稿。

特定の実装に依存しますが、API から結果をフェッチするときにクエリ パラメータを使用できるようにすることは広く行われています。 ページ 結果の。 たとえば、私たちが使用しているモック REST API では、 page および limit 特定の時間に表示するバッチのみをロードできるパラメーター。

このようにして、ユーザーに表示したいデータのみをロードします! 次に、読み込み時間を短縮するために次のページをプリフェッチするか、表示するデータのみを読み込むことで達成される計算スピードアップを楽しむことができます。

これらのパラメーターを使用して、フェッチ リクエストを修正します。

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

上記のコードでは、API エンドポイントに XNUMX つのパラメーターを追加しました。 pageNumber と ページあたりの投稿数 これにより、投稿をいくつかのページに分割し、これらの投稿をページ番号に基づいて表示できるようになります。

さらに、 pageNumber fetchPosts() これにより、ページが変更されるたびにこの関数を呼び出すことができます。

ページの下部にあるページ ナビゲーション ボタンに機能を追加し、ページ番号に基づいて適切なコンテンツを表示します。

マークアップに、ページネーション ボタンを表示するセクションがあることがわかります。

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

これから追加します click 各ボタンにイベントを追加して、クリックするとそのページのコンテンツが表示されるようにします。

の実装 前へ ボタン

ここでのロジックは非常に単純です。 必要なのは、要素を表す要素を取得することだけです。 前のボタン、追加 click イベントリスナーを追加し、ボタンがクリックされたときに適切なコンテンツを表示します:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

を追加した後 click イベントリスナー、現在のページ番号がより大きいかどうかを確認しました 1 コールバック関数で。 数が以下の場合 1、現在のコンテンツを表示し続けます。 ただし、現在のページ番号がより大きい場合 1 その値を自由にデクリメントして、 fetchPosts(pageNumber) 引数として渡された新しいページ番号を持つ関数。したがって、前のページのコンテンツが表示されます。

の実装 Next ボタン

ここでのロジックは、 前 ボタンにいくつかの小さな変更を加えただけです。 もちろん、クラスでリスト要素を取得します next prev. また、現在のページ番号が ページ数 私たちが設定した 30 以前に手動で。 最後に、現在のページ番号をデクリメントする代わりにインクリメントします。

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

まとめ

Web アプリケーションでデータベースやその他のデータ ソースを表示しようとする場合は常に、コンテンツをより小さく管理しやすいチャンクに分割して個別に表示することが重要です。

この記事では、外部ライブラリやツールを使用せずに、JavaScript を使用してゼロからページネーションを実装する方法を調べました。

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://stackabuse.com/pagination-in-vanilla-javascript/