ページネーションコンポーネントの構築 | JavaScript チュートリアル

はじめに

このプロジェクトでは、Web アプリケーションで一般的に使用されるページネーションコンポーネントを作成する方法を学びます。ページネーションコンポーネントは、バックエンドでの照会時間を短縮し、データの読み込みが多すぎることによるページレンダリングのパフォーマンスに影響を与えません。

👀 プレビュー

Pagination component demo

🎯 タスク

このプロジェクトでは、以下を学びます。

データ要求を処理し、現在のページとページの総数のデータを取得するための ajax 関数を実装する方法。
ページネーションコンポーネントのボタンにイベントをバインドするための initEvents 関数を実装する方法。
関数の引数に基づいてページネーション配列を生成するための createPaginationIndexArr 関数を実装する方法。
ページネーションコンポーネント用の文字列テンプレートを生成するための renderPagination 関数を実装する方法。
現在のページに基づいてコンテンツをレンダリングする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JavaScript で再利用可能なページネーションコンポーネントを構築する。
Axios を使用して HTTP 要求を行い、レスポンスデータを処理する。
現在のページ、総ページ数、および表示する最大ページボタン数に基づいてページネーション配列を生成する。
現在のページに基づいてページネーションコンポーネントとコンテンツを更新する。

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下のとおりです。

├── css
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

ここで：

css/index.css は CSS スタイルファイルです。
index.html はメインページです。
js/data.json はデータを格納する JSON ファイルです。
js/axios.min.js は axios ファイルです。
js/index.js は完成させるファイルです。
js/util.js はユーティリティ関数を格納するファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

Initial Effect

ajax 関数を実装する

このステップでは、js/index.js ファイルに ajax 関数を実装して、データ要求を処理します。

js/index.js ファイルを開きます。
ajax 関数を見つけて、実装を完了します。
ajax 関数は、関数の引数に基づいて現在のページのデータとページの総数を取得し、それらを返す必要があります。
提供された Axios ライブラリを使用して、./js/data.json ファイルに HTTP 要求を行うことができます。

ここに完成した ajax 関数があります。

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: 関数パラメータの `query` オブジェクト `currentPage, pageSize` に基づいて、現在のページのデータを取得する。
  let result = {
    data: [],
    total: 0
  };

  let resData = [];
  let res = await axios[method](url, data);
  if (res.status === 200) {
    resData = res.data.data;
    result.total = res.data.total;
  }
  result.data = resData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return result;
}

initEvents 関数を実装する

このステップでは、js/index.js ファイルに initEvents 関数を実装します。この関数は、ページネーションコンポーネントのボタンにイベントをバインドします。

js/index.js ファイルを開きます。
initEvents 関数を見つけて、実装を完了します。
"<" ボタンがクリックされたとき、this.currentPage の値は 1 減少し、最小値は 1 です。
">" ボタンがクリックされたとき、this.currentPage の値は 1 増加し、最大値は this.totalPages です。
this.currentPage の値が変更されたとき、ページ上のページネーションコンポーネントはそれに応じて更新される必要があります。

ここに完成した initEvents 関数があります。

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: "<" ボタンのクリックイベント、クリック時に this.currentPage - 1。
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: ">" ボタンのクリックイベント、クリック時に this.currentPage + 1。
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.initPagination();
      }
    });
    this.root.querySelector(".pager").addEventListener("click", (e) => {
      if (e.target.nodeName.toLowerCase() === "li") {
        if (this.currentPage === e.target.innerText) return;
        if (e.target.classList.contains("more")) return;
        this.currentPage = Number(e.target.innerText);
      }
      this.initPagination();
    });
  }

createPaginationIndexArr 関数を実装する

このステップでは、js/util.js ファイルに createPaginationIndexArr 関数を実装します。この関数は、特定のルールに基づいて関数の引数に基づいてページネーション配列 (indexArr) を生成します。

js/util.js ファイルを開きます。
createPaginationIndexArr 関数を見つけて、実装を完了します。
関数は、渡されたパラメータ currentPage、totalPages、および pagerCount に基づいてページネーション配列 (indexArr) を生成する必要があります。
ページネーション配列を生成するルールは以下のとおりです。
- 特殊ケース：totalPages <= pagerCount
- 通常ケース：totalPages > pagerCount
生成された indexArr は、チャレンジの説明に提供された例に従う必要があります。

ここに完成した createPaginationIndexArr 関数があります。

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: 渡されたパラメータに基づいてページング配列 indexArr を生成する。
  indexArr[0] = 1;
  if (totalPages <= pagerCount) {
    for (let i = 1; i < totalPages; i++) {
      indexArr.push(i + 1);
    }
  } else {
    indexArr[pagerCount - 1] = totalPages;
    if (currentPage <= pagerCount - 2) {
      for (let i = 1; i < pagerCount - 1; i++) {
        indexArr[i] = i + 1;
      }
    } else if (currentPage <= totalPages - pagerCount + 2) {
      let j = 1;
      for (
        let i = -Math.ceil((pagerCount - 3) / 2);
        i <= Math.floor((pagerCount - 3) / 2);
        i++
      ) {
        indexArr[j++] = currentPage + i;
      }
    } else {
      let j = 1;
      for (let i = totalPages - pagerCount + 2; i < totalPages; i++) {
        indexArr[j++] = i;
      }
    }
  }

  return indexArr;
};

renderPagination 関数を実装する

このステップでは、js/index.js ファイルに renderPagination 関数を実装します。この関数は、indexArr 配列に基づいてページネーションコンポーネント用の文字列テンプレート template を生成します。

js/index.js ファイルを開きます。
renderPagination 関数を見つけて、実装を完了します。
関数は、indexArr 配列に基づいて、チャレンジの説明に記載されているルールに従って、ページネーションコンポーネント用の文字列テンプレート template を生成する必要があります。
生成された template は、this.root.innerHTML を使用してページネーションコンポーネントの HTML 構造に挿入される必要があります。

ここに完成した renderPagination 関数があります。

renderPagination(indexArr) {
  let template = "";
  // TODO: indexArr 配列に基づいて、ページングコンポーネント用の文字列テンプレート template を生成する。
  template = indexArr.reduce((prev, next, index) => {
    if (indexArr[index] - indexArr[index - 1] > 1) {
      prev += `<li class="number more">...</li>`;
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    } else {
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    }
    return prev;
  }, "");

  this.root.innerHTML = `
      <div class="pagination">
          <div class="btn btn-left" id="btn-prev">&lt;</div>
          <ul class="pager">${template} </ul>
          <div class="btn btn-right" id="btn-next">&gt;</div>
      </div>`;
}

ページネーションコンポーネントをテストする

このステップでは、ページネーションコンポーネントの最終結果をテストします。

js/index.js と js/util.js ファイルを保存します。
ブラウザで Web ページを更新します。
ページの表示を確認します。

おめでとうございます！あなたはページネーションコンポーネントの実装を完了しました。最終的なページの表示は以下の通りです。

Image Description

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。

再利用可能なページネーションコンポーネントの構築